@font-face { font-family: 'Kensington'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/kensington/kensington-compressed-bold.woff2') format('woff2'); }
/* Gedeeld stijlbestand van de werkomgeving (layout.blade.php), verhuisd uit het \3c style>-blok (interface golf 4a, #460).
   De regels en de betekenis van de tokens staan in docs/ONTWERP.md. De variabelen die per omgeving verschillen (--merk = merkkleur van de klant,
   --roze = oude naam van --merk, --link, --gevaar-tekst, --accent-leesbaar, --accent-tekst) zet de layout inline; --accent en --accent-licht leiden daar vanaf. */
/* Design System-tokens (interface golf 4a, deel 2). Namen met --hh- ; zelfde namen en waarden als public/css/hh-merk.css
   (tests/Feature/DesignTokensTest.php bewaakt dat). De bestaande app-variabelen hieronder blijven ongewijzigd (geen visueel verschil);
   waar ze afwijken staat dat in docs/ONTWERP.md onder "Bekende afwijkingen" (bijv. --inkt #151412 tegenover --hh-inkt = --hh-blauw). */
:root {
    /* Kleuren */
    --hh-creme:#fbf9ee;
    --hh-seashell:#e9e3da;
    --hh-blauw:#101c68;
    --hh-inkt:var(--hh-blauw);
    --hh-roze:#f55892;
    --hh-limoen:#caf24c;
    --hh-rood:#df3b22;
    --hh-zwart:#151412;
    --hh-roze-tekst:#c71862;
    --hh-roze-groot:#e23a7b;
    --hh-kaart:#fffdf7;
    --hh-roze-tint:#fde6ee;
    --hh-limoen-tint:#f2fbd3;
    --hh-blauw-tint:#e7e9f3;
    --hh-rood-tint:#fbe4df;
    --hh-plaatshouder:#5f5e5a;
    --hh-intern-grijs:#5d5a4d;
    --hh-intern-groen:#1f6b3d;
    --hh-ted-vacht:#e4a86d;
    /* Lettertypefamilies */
    --hh-kop:'Kensington', 'Anton', 'Arial Narrow', sans-serif;
    --hh-tekst:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hh-hand:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    --hh-font-accent:'Taklobo', 'Kensington', serif;
    /* Lettergroottes (de stijlen uit tokens.json, alleen de grootte) */
    --hh-kop-1-grootte:4.6rem;
    --hh-kop-2-grootte:3.2rem;
    --hh-kop-3-grootte:1.55rem;
    --hh-app-kop-1-grootte:46px;
    --hh-app-kop-2-grootte:21px;
    --hh-stap-nummer-grootte:2.1rem;
    --hh-kaart-nummer-grootte:1.5rem;
    --hh-kaart-prijs-grootte:1.35rem;
    --hh-stip-cijfer-grootte:1.05rem;
    --hh-tekst-grootte:17px;
    --hh-tekst-app-grootte:14px;
    --hh-lead-grootte:1.15rem;
    --hh-sub-grootte:1.12rem;
    --hh-citaat-grootte:1.05rem;
    --hh-lijst-grootte:0.97rem;
    --hh-knop-grootte:0.98rem;
    --hh-knop-app-grootte:0.95rem;
    --hh-nav-grootte:0.95rem;
    --hh-veldlabel-grootte:0.92rem;
    --hh-voet-grootte:0.94rem;
    --hh-klein-grootte:0.85rem;
    --hh-bewijslast-grootte:0.85rem;
    --hh-etiket-grootte:0.72rem;
    --hh-sticker-grootte:0.74rem;
    --hh-etiket-klein-grootte:0.68rem;
    --hh-paneel-kop-grootte:0.74rem;
    --hh-veld-etiket-grootte:0.72rem;
    --hh-hand-grootte:1.6rem;
    --hh-hand-motto-grootte:2.1rem;
    --hh-hand-briefje-grootte:2rem;
    --hh-hand-naam-grootte:2.6rem;
    --hh-hand-kop-grootte:1.7rem;
    --hh-knipoog-grootte:4rem;
    /* Afstanden */
    --hh-ruimte-6:6px;
    --hh-ruimte-8:8px;
    --hh-ruimte-10:10px;
    --hh-ruimte-12:12px;
    --hh-ruimte-14:14px;
    --hh-ruimte-16:16px;
    --hh-ruimte-18:18px;
    --hh-ruimte-20:20px;
    --hh-ruimte-22:22px;
    --hh-ruimte-24:24px;
    --hh-ruimte-26:26px;
    --hh-ruimte-30:30px;
    --hh-ruimte-40:40px;
    --hh-ruimte-56:56px;
    --hh-ruimte-64:64px;
    --hh-ruimte-92:92px;
    --hh-maxw:1180px;
    /* Rondingen */
    --hh-hoek:20px;
    --hh-hoek-ballon:18px;
    --hh-hoek-paneel:16px;
    --hh-hoek-melding:14px;
    --hh-hoek-veld:12px;
    --hh-hoek-slot:28px;
    --hh-hoek-bolletje:4px;
    --hh-pil:999px;
    --hh-rond:50%;
    /* Randen */
    --hh-rand:3px;
    --hh-rand-dun:1.5px;
    --hh-rand-veld:2px;
    --hh-focus:3px;
    --hh-focusring:#1d4ed8; /* de focusring: 6,4:1 op crème; op donkere balken met een witte binnenring (issue 830) */
    /* Schaduwen */
    --hh-schaduw-plaat:6px 6px 0 #101c68;
    --hh-schaduw-knop:3px 3px 0 #101c68;
    --hh-schaduw-ingedrukt:0 0 0 #101c68;
    --hh-schaduw-knop-licht:3px 3px 0 #fbf9ee;
}
/* Variabelen van de werkomgeving zoals ze waren (ongewijzigd). */
:root {
    --inkt:#151412; --creme:#FBF9EE; --blauw:#101C68; --limoen:#CAF24C; --grens:#e4e0d4; --veld-rand:#8a8574;
    --accent:var(--roze);
    --gevaar:#DF3B22;
    --accent-licht:color-mix(in srgb, var(--roze) 11%, #fff);
}
* { box-sizing: border-box; }
:focus-visible { outline:3px solid #1d4ed8; outline-offset:2px; }
body { margin:0; font-family: Inter, -apple-system, Segoe UI, Arial, sans-serif; background:var(--creme); color:var(--inkt); font-size:14px; line-height:1.45; }
/* Huisstijl koppen: h1 en h2 in Kensington Compressed Bold, hoofdletters, corporate blauw. h3 blijft Inter vet. Kensington is breder in hoofdletters: clamp() en overflow-wrap houden het op 375 px binnen het scherm. */
h1 { font-family:var(--hh-kop); font-size:clamp(24px, 7vw, 34px); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.15; color:var(--hh-blauw); overflow-wrap:anywhere; min-width:0; margin:0 0 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.h1-aantal { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px; border-radius:20px; background:#ecebe4; color:#555; font-size:13px; font-weight:600; }
.paginakop { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.paginakop h1 { margin:0; }
.paginakop .rechts { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rij-avatar { width:34px; height:34px; border-radius:8px; background:#f1efe8; color:#555; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.rij-titel { display:flex; align-items:center; gap:10px; }
.rij-titel small { display:block; color:#6b6b6b; font-size:12px; font-weight:400; }
.fase-bol { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 6px; border-radius:20px; font-size:12px; font-weight:600; margin-right:3px; }
h2 { font-family:var(--hh-kop); font-size:clamp(18px, 5vw, 23px); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; color:var(--hh-blauw); overflow-wrap:anywhere; margin:26px 0 10px; }
h3 { font-size:15px; font-weight:700; margin:0 0 8px; }
/* Tussenkop die in de koppenstructuur een h2 is maar eruitziet als h3 (audit 02-11-2026): geen sprong van h1 naar h3 voor een schermlezer. */
h2.kop-klein { font-family:inherit; font-size:15px; font-weight:700; text-transform:none; letter-spacing:normal; line-height:inherit; color:inherit; overflow-wrap:normal; margin:0 0 8px; }
/* Klein label boven een kop: Inter, hoofdletters, ruime letterafstand, blauw. */
.kop-label { display:block; font-family:var(--hh-tekst); font-size:12px; font-weight:600; letter-spacing:0; color:var(--hh-blauw); margin:0 0 6px; overflow-wrap:anywhere; }
/* Label voor schermlezers, niet in beeld (een veld zonder zichtbaar label heeft er toch een nodig). */
.alleen-lezer { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Bovenbalk (naar Teamtailor): merk links, vijf onderdelen die bij aanwijzen uitklappen, rechts +Kandidaat en het tandwiel. */
header.topbar { background:#fff; color:var(--inkt); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--grens); }
/* Hoogte van de vastgezette bovenbalk (56px plus de rand; op de telefoon lager, zonder balk 0). Een springlink (#anker) en
   andere vastgezette balken houden hier rekening mee, zodat er niets achter de bovenbalk verdwijnt. */
:root { --topbar-hoogte:57px; }
:root:has(header.topbar[hidden]), :root:not(:has(header.topbar)) { --topbar-hoogte:0px; }
html { scroll-padding-top:calc(var(--topbar-hoogte) + 12px); }
.topbar-rij { display:flex; align-items:stretch; gap:6px; padding:0 20px; height:56px; max-width:1240px; margin:0 auto; }
.merk { display:flex; align-items:center; gap:10px; color:var(--inkt); text-decoration:none; margin-right:14px; min-width:0; }
.merk-logo { height:30px; max-width:150px; object-fit:contain; }
.merk-blok { width:28px; height:28px; border-radius:7px; background:var(--accent); color:var(--accent-tekst); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.merk-naam { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
/* In het portaal staan maar twee menu-items: de bedrijfsnaam mag daar breder zijn (06-11-2026). */
.merk--portaal .merk-naam { max-width:min(420px, 50vw); }
.hoofdnav { display:flex; align-items:stretch; flex-shrink:0; }
.nav-item { position:relative; display:flex; align-items:stretch; }
.nav-item > a { display:flex; align-items:center; color:var(--inkt); text-decoration:none; font-size:14px; opacity:.75; padding:0 12px; margin:11px 1px; border-radius:20px; white-space:nowrap; }
.nav-item:hover > a, .nav-item:focus-within > a { opacity:1; }
.nav-item.actief > a { opacity:1; font-weight:600; color:var(--accent-leesbaar); background:var(--accent-licht); }
.uitklap { display:none; position:absolute; top:100%; left:0; min-width:250px; background:#fff; color:var(--inkt); border:1px solid var(--grens); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px; z-index:60; }
/* Een lang menu (zoals het tandwiel) loopt niet onder het scherm uit: het scrolt zelf, zonder de pagina erachter mee te nemen. 56px is de bovenbalk. */
.uitklap { max-height:calc(100vh - 56px - 16px); max-height:calc(100dvh - 56px - 16px); overflow-y:auto; overscroll-behavior:contain; }
/* De rechtermenu's (tandwiel, hulp) stoppen boven de zwevende knop "Vraag of idee" rechtsonder, zodat die niet over Uitloggen valt. */
.uitklap-rechts { left:auto; right:0; max-height:calc(100vh - 56px - 72px); max-height:calc(100dvh - 56px - 72px); }
.nav-item:hover .uitklap, .nav-item .uitklap:focus-within { display:block; } /* aanwijzen, of de focus staat in het menu (Shift+Tab terug); Tab langs het hoofditem opent niets (issue #825) */
.nav-item.open .uitklap { display:block; } /* aanraakscherm: geopend met een eerste tik (layout.blade.php) */
.nav-item.dicht .uitklap { display:none; }
.skiplink { position:absolute; left:8px; top:-60px; z-index:1000; background:var(--hh-inkt, #1a1a1a); color:#fff; padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none; }
.skiplink:focus { top:8px; }
main[tabindex="-1"]:focus { outline:none; }
.uitklap a { display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:7px; color:var(--inkt); text-decoration:none; font-size:14px; }
.uitklap a small { color:#6b6b6b; font-size:12px; }
.uitklap a:hover { background:var(--creme); }
.uitklap a.actief { background:var(--creme); font-weight:600; }
.uitklap-groep { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#6b6b6b; padding:10px 10px 3px; }
.omgeving-knop { display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--grens); border-radius:20px; font-size:13px; color:var(--inkt); text-decoration:none; white-space:nowrap; max-width:200px; }
.omgeving-knop span { overflow:hidden; text-overflow:ellipsis; }
.omgeving-keuze { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; padding:8px 10px; border:0; border-radius:7px; background:none; color:var(--inkt); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.omgeving-keuze small { color:#6b6b6b; font-size:12px; }
.omgeving-keuze:hover, .omgeving-keuze.actief { background:var(--creme); }
.omgeving-keuze.actief { font-weight:600; }
.omgeving-lijst { max-height:70vh; overflow-y:auto; min-width:270px; }
.omgeving-zoek { margin:4px 4px 6px; width:calc(100% - 8px); padding:7px 10px; font-size:13px; }
.omgeving-test summary { cursor:pointer; list-style:none; }
.omgeving-test summary::before { content:'\25B8  '; }
.omgeving-test[open] summary::before { content:'\25BE  '; }
.uitklap a.omgeving-alle { border-top:1px solid var(--grens); border-radius:0 0 7px 7px; margin-top:6px; }
.omgeving-balk { background:var(--hh-limoen-tint); color:var(--hh-inkt); border-bottom:1px solid var(--hh-limoen-tint); padding:8px 20px; font-size:13px; text-align:center; }
.omgeving-balk button { margin-left:10px; padding:3px 10px; font-size:12px; border:1px solid var(--hh-limoen-tint); border-radius:14px; background:#fff; color:var(--hh-inkt); cursor:pointer; }
.uitklap-account { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; font-size:13px; color:#555; }
.uitklap-account form { margin:0; }
.uitklap-account button { background:none; border:none; color:var(--accent-leesbaar); font-weight:600; cursor:pointer; padding:0; font-size:13px; font-family:inherit; }
.topbar-rechts { margin-left:auto; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.topbar-zoek { margin:0; }
.topbar-zoek input { margin:0; width:180px; padding:7px 12px; border-radius:20px; font-size:13px; background:var(--creme); border-color:transparent; transition:width .15s; }
.topbar-zoek input:focus { width:260px; background:#fff; border-color:var(--grens); }
.knop-nieuw { color:var(--accent-tekst); text-decoration:none; font-size:13px; font-weight:600; background:var(--accent); padding:8px 14px; border-radius:8px; white-space:nowrap; }
.tandwiel { color:var(--inkt); }
.tandwiel { font-size:18px; padding:0 10px; }
/* Op een gewone laptop (issue #449) past de balk net niet: het zoekveld krimpt eerst en de omgevingsknop toont alleen het icoon. Het tandwiel en + Kandidaat blijven altijd volledig in beeld. */
@media (min-width: 761px) and (max-width: 1439px) {
    .topbar-zoek input, .topbar-zoek input:focus { width:140px; }
    .omgeving-knop span { display:none; }
}

main { max-width: 1100px; margin: 0 auto; padding: 28px 24px 40px; }

/* Instellingen: zijbalk links met categorieën, zoals Teamtailor's Settings. */
.instellingen-wrap { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:220px 1fr; gap:28px; padding:28px 24px 40px; }
/* De inhoud vult altijd de kolom naast de zijbalk (06-11-2026): de algemene main-regel centreerde een smalle pagina, waardoor de inhoud bij elk klik in de zijbalk heen en weer sprong. */
.instellingen-inhoud { margin:0; }
.instellingen-inhoud input[type=file] { max-width:100%; }
.tabel-scroll { overflow-x:auto; }
/* De zijbalk is langer dan een laptopscherm: hij scrolt zelf, zodat elk onderdeel bereikbaar is waar je ook op de pagina staat. */
.instellingen-zijbalk { position:sticky; top:74px; align-self:start; max-height:calc(100vh - 74px - 12px); max-height:calc(100dvh - 74px - 12px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.instellingen-zijbalk a.zijbalk-titel { font-size:18px; font-weight:700; margin:4px 0 14px; padding:0 10px; color:var(--inkt); }
.instellingen-zijbalk .zijbalk-zoek { margin:0 0 6px; font-size:13px; padding:7px 10px; }
.instellingen-zijbalk a.zijbalk-ook { font-size:13px; color:var(--hh-intern-grijs); }
.instellingen-tegels { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:18px; }
.instellingen-tegel { background:var(--hh-kaart); border:1px solid var(--grens); border-radius:10px; padding:16px; }
.instellingen-tegel h2 { font-size:16px; margin:0 0 4px; }
.instellingen-tegel p { font-size:13px; color:var(--hh-intern-grijs); margin:0 0 10px; }
.instellingen-tegel ul { list-style:none; margin:0; padding:0; }
.instellingen-tegel li a { display:block; padding:4px 0; font-size:14px; }
/* Zoeken op de tegelpagina (issue 810): hidden wint van de display-regels hierboven en hieronder. */
.instellingen-tegels-zoek { margin-top:14px; max-width:420px; }
.instellingen-tegels-zoek input[type=search] { width:100%; margin:0; min-height:44px; }
.instellingen-tegels-leeg { margin:8px 0 0; font-size:14px; color:var(--hh-intern-grijs); }
.instellingen-tegel[hidden], .instellingen-tegel li[hidden], .instellingen-tegels-leeg[hidden] { display:none; }
.nav-hulp .hulp-knop { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--grens); border-radius:50%; font-size:14px; font-weight:700; text-decoration:none; color:var(--inkt); }
.zijbalk-groep { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#6b6b6b; margin:14px 0 4px; }
.instellingen-zijbalk a { display:block; padding:7px 10px; border-radius:7px; color:#444; text-decoration:none; font-size:14px; }
.instellingen-zijbalk a:hover { background:#fff; }
.instellingen-zijbalk a.actief { background:#fff; color:var(--inkt); font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
/* Hoofdstukken als uitklapper (#507). Op de computer staan ze altijd open en ziet de kop eruit als een gewone groepskop;
   het script in layout.blade.php houdt ze open. Wat het zoeken verbergt, krijgt het hidden-attribuut: deze regel wint van display:block hierboven. */
.zijbalk-hoofdstuk > summary { list-style:none; cursor:pointer; }
.zijbalk-hoofdstuk > summary::-webkit-details-marker { display:none; }
/* Rustig menu (04-11-2026, naar Teamtailor): een hoofdstuk is een kop met icoon en een pijltje; de onderdelen staan er ingesprongen onder,
   zonder uitlegregel (die staat in de title). */
.zijbalk-hoofdstuk > summary.zijbalk-groep { display:flex; align-items:center; gap:10px; margin:4px 0 2px; padding:6px 10px; border-radius:7px; font-size:14px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--inkt); }
.zijbalk-hoofdstuk > summary.zijbalk-groep:hover { background:#fff; }
.zijbalk-hoofdstuk > summary.zijbalk-groep::after { content:""; margin-left:auto; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.5; }
.zijbalk-hoofdstuk[open] > summary.zijbalk-groep::after { transform:rotate(-135deg) translateY(-2px); }
.zijbalk-hoofdstuk > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.zijbalk-icoon { flex-shrink:0; width:26px; height:26px; padding:4px; box-sizing:border-box; border-radius:7px; background:#fff; border:1px solid var(--grens); }
.instellingen-zijbalk a.zijbalk-item { padding:6px 10px 6px 46px; }
.instellingen-zijbalk a.zijbalk-ook { padding-left:58px; }
.instellingen-zijbalk .zijbalk-item[hidden], .instellingen-zijbalk .zijbalk-hoofdstuk[hidden], .instellingen-zijbalk .zijbalk-leeg[hidden] { display:none; }
.instellingen-zijbalk .zijbalk-leeg { margin:6px 10px; font-size:13px; color:var(--hh-intern-grijs); }
/* Startpagina (#507): de status per item als chip naast de link. Aan = limoen, uit = het gewone zandvlak, fout = rood vlak. */
/* Vaste kop van elke instellingenpagina (instellingen/partials/kop): de uitleg onder de titel. */
.instellingen-kop-uitleg { color:var(--hh-intern-grijs); margin-top:-8px; }
.instellingen-tegel li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:3px 0; }
.instellingen-tegel li a { padding:2px 0; }
.instellingen-tegel-status { display:inline-flex; flex-wrap:wrap; gap:4px; }
.instellingen-tegel .instellingen-status--aan { background:var(--hh-limoen); color:var(--hh-blauw); }
.instellingen-tegel .instellingen-status--fout { background:var(--hh-rood-tint); color:var(--hh-blauw); }
.instellingen-inhoud article { max-width:none !important; }

.voet { text-align:center; padding:10px 0 26px; font-size:12px; color:#6b6b6b; }
.voet a { color:#6b6b6b; }

/* Telefoonmenu (audit 28-09-2026, DWARS-73 en DWARS-10): op een telefoon is er geen hover, dus één uitklapmenu met alle onderdelen,
   de instellingen en Uitloggen. Een gewone details/summary: werkt met aanraking en toetsenbord, zonder script. Op de computer verborgen. */
.mobiel-menu { display:none; }
/* Tabletbreedte (761-900px, bijvoorbeeld een iPad rechtop of een half venster): het hoofdmenu, het vraagteken en het
   tandwiel passen niet naast het zoekveld. Dan het telefoonmenu, zodat niets van het scherm valt. */
@media (min-width: 761px) and (max-width: 900px) {
    .mobiel-menu { display:block; }
    .topbar-rij:has(.mobiel-menu) > .hoofdnav, .topbar-rechts .nav-tandwiel, .topbar-rechts .nav-hulp { display:none; }
}
.mobiel-menu > summary { list-style:none; cursor:pointer; width:40px; height:36px; border:1px solid var(--grens); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:#fff; }
.mobiel-menu > summary::-webkit-details-marker { display:none; }
.mobiel-menu > summary span { display:block; width:18px; height:2px; background:var(--inkt); border-radius:2px; }
.mobiel-menu[open] > summary { border-color:var(--accent); background:var(--accent-licht); }
.mobiel-menu > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mobiel-paneel { position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--grens); box-shadow:0 14px 24px rgba(0,0,0,.14); padding:6px 10px 14px; max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px); overflow-y:auto; z-index:60; }
.mobiel-paneel a { display:flex; flex-direction:column; gap:1px; min-height:44px; justify-content:center; padding:8px 10px; border-radius:8px; color:var(--inkt); text-decoration:none; font-size:15px; }
.mobiel-paneel a small { color:#6b6b6b; font-size:12px; }
.mobiel-paneel a.actief { background:var(--creme); font-weight:600; color:var(--accent-leesbaar); }
.mobiel-paneel .uitklap-groep { padding-top:14px; }
.mobiel-groep > summary { list-style:none; cursor:pointer; display:flex; align-items:center; min-height:44px; padding:8px 10px; border-radius:8px; font-size:15px; color:var(--inkt); }
.mobiel-groep > summary::-webkit-details-marker { display:none; }
.mobiel-groep > summary::after { content:""; margin-left:auto; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.5; }
.mobiel-groep[open] > summary::after { transform:rotate(-135deg) translateY(-2px); }
.mobiel-groep > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mobiel-groep > a { padding-left:22px; }
.mobiel-paneel .uitklap-account { padding:8px 10px; font-size:14px; }
.mobiel-paneel .uitklap-account button { font-size:15px; padding:10px 0 10px 16px; }

@media (max-width: 760px) {
    .topbar-zoek input { width:96px; }
    .topbar-zoek input:focus { width:140px; }
    .omgeving-knop span { display:none; }
    .topbar-rij { padding:0 10px; height:auto; flex-wrap:wrap; }
    :root { --topbar-hoogte:49px; }
    .merk { height:48px; margin-right:6px; }
    .merk-naam { display:none; }
    .hoofdnav { order:3; width:100%; overflow-x:auto; border-top:1px solid var(--grens); }
    .nav-item > a { padding:10px 11px; white-space:nowrap; }
    .uitklap { position:fixed; left:8px; right:8px; top:auto; min-width:0; }
    .topbar-rechts { margin-left:auto; height:48px; }
    .knop-nieuw { padding:6px 10px; }
    .fv-stap { min-width:0; }
    .fv-label { max-width:100%; font-size:12px; letter-spacing:0; overflow-wrap:anywhere; }
    /* KANDIDAATKAART-43: op een telefoon zeven labels naast elkaar passen niet. Alleen de bollen, en de huidige fase als tekst eronder (de labels blijven voor schermlezers). */
    .fv-stepper { margin-bottom:6px; }
    .fv-stepper .fv-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    .fv-stepper + .fv-nu-tekst { display:block; }
    .mobiel-menu { display:block; }
    .topbar-rij:has(.mobiel-menu) > .hoofdnav, .topbar-rechts .nav-tandwiel, .topbar-rechts .nav-hulp { display:none; }
    main { padding:16px; }
    .instellingen-wrap { grid-template-columns:minmax(0,1fr); gap:14px; padding:16px; }
    .instellingen-inhoud, .instellingen-zijbalk { min-width:0; }
    .instellingen-inhoud { margin:0; }
    /* Telefoon (#507): elk hoofdstuk een uitklapper onder elkaar in plaats van een rij knoppen; niets loopt zijwaarts. */
    .instellingen-zijbalk { position:static; max-height:none; overflow:visible; background:var(--hh-kaart); border:1px solid var(--grens); border-radius:10px; padding:8px; }
    .instellingen-zijbalk .zijbalk-titel { display:none; }
    .instellingen-zijbalk .zijbalk-zoek { width:100%; margin:0 0 6px; }
    .zijbalk-hoofdstuk { border-top:1px solid var(--grens); }
    .zijbalk-hoofdstuk > summary.zijbalk-groep { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; margin:0; padding:0 10px; cursor:pointer; font-size:13px; font-weight:700; color:var(--inkt); }
    .instellingen-zijbalk a.zijbalk-item { display:flex; flex-direction:column; justify-content:center; min-height:44px; padding:6px 10px 6px 46px; font-size:14px; overflow-wrap:anywhere; }
    .instellingen-zijbalk a.zijbalk-ook { padding-left:58px; font-size:13px; }
}
.veld-fout { color:#a8261c; font-size:13px; font-weight:600; margin:-6px 0 10px; }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color:#a8261c; }
.badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-lead { background:#eee; color:#555; }
.nav-teller { margin-left:6px; padding:1px 7px; background:var(--accent); color:var(--accent-tekst); }
.menu-teller { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:var(--accent-tekst); font-size:11px; line-height:18px; text-align:center; }
.mobiel-menu summary { position:relative; }
.goedkeuren-melding { position:fixed; right:20px; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:80; max-width:340px; background:#fff; border:1px solid var(--grens); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:14px 16px; }
.goedkeuren-melding p { margin:0 0 10px; font-size:14px; }
.goedkeuren-melding .acties { display:flex; gap:8px; }
.goedkeuren-melding a, .goedkeuren-melding button { font:inherit; font-size:13px; padding:7px 14px; border-radius:20px; cursor:pointer; text-decoration:none; }
.goedkeuren-melding a { background:var(--accent); color:var(--accent-tekst); border:1px solid var(--accent); }
.goedkeuren-melding button { background:#fff; color:var(--inkt); border:1px solid var(--grens); }
@media (max-width:720px) { .goedkeuren-melding { left:12px; right:12px; bottom:calc(72px + env(safe-area-inset-bottom)); max-width:none; } }
.badge-klant { background:var(--limoen); color:var(--inkt); }
.badge-oud { background:#f0d0d0; color:#7a2020; }
/* Rustiger dan de standaard-browserafstand (Sofie, 22-09-2026, na Koppelingen als voorbeeld):
   meer lucht in en tussen kaarten, op één plek voor elke pagina die .card gebruikt. */
.card { background:#fff; border:1px solid var(--grens); border-radius:12px; padding:22px 24px; margin-bottom:20px; }
.card :where(h3) { margin:0 0 8px; } /* :where: een hulpklasse (u-mt-18) op de kop wint (#507) */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--grens); font-size:14px; }
th { color:#6b6b6b; font-weight:600; font-size:12px; }
a.rij-link { color:var(--inkt); text-decoration:none; font-weight:600; }
a.rij-link:hover { text-decoration:underline; }
/* Eén linkstijl (interface golf 1c, issue #451): merkkleur, onderstreept bij aanwijzen, geen browser-blauw. Links met een eigen klasse (menu, rijen, knoppen) houden hun eigen kleur. */
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
/* Een link midden in lopende tekst is ook zonder kleur te herkennen (WCAG 1.4.1): onderstreept. Alle links zonder eigen klasse in de hoofdinhoud (tabellen, kaarten, tekst, voetregels), menu's en links met een eigen klasse niet. */
main a:not([class]):not(nav a) { text-decoration:underline; text-underline-offset:2px; }
.link-vet { font-weight:600; flex-shrink:0; }
.link-zacht { color:#6b6b6b; }
.link-erf { color:inherit; }
.link-klein { font-size:13px; }
/* Een knop die er als link uitziet (bijvoorbeeld Terugzetten): geen rand, geen vlak. */
.knop-link { background:none; border:0; padding:0; font:inherit; color:var(--link); cursor:pointer; }
.knop-link:hover { text-decoration:underline; }
/* Drie knoppen (Design System: pil, knop-app 700): primair in de merkkleur, licht, en gevaar voor Afwijzen en Verwijderen. Zelfde hoogte, ronding en lettergrootte; .btn-klein is alleen een kleiner formaat voor in rijen en tabellen. */
.btn, .btn-licht, .btn-gevaar { display:inline-block; border:1px solid transparent; padding:8px 18px; border-radius:999px; font-family:var(--hh-kop); font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; max-width:100%; overflow-wrap:break-word; line-height:1.45; text-align:center; text-decoration:none; cursor:pointer; }
.btn:hover, .btn-licht:hover, .btn-gevaar:hover { text-decoration:none; }
/* Audit 02-11-2026: met overflow-wrap:anywhere kromp een knop in een smalle tabelcel tot één letter breed (BEOORDELEN letter voor
   letter onder elkaar). break-word breekt alleen een woord dat echt niet past en telt niet mee voor de minimale breedte; in een
   tabelcel blijft de tekst van een knop op één regel (de tabel scrolt dan zelf, zie .ds-tabel-scroll). */
td .btn, td .btn-licht, td .btn-gevaar, th .btn, th .btn-licht, th .btn-gevaar { white-space:nowrap; }
/* Kensington Compressed is op 12 px en kleiner niet te lezen: een kleine knop (.btn-klein, in rijen, tabellen en filters) staat in Inter van 12 px. */
.btn-klein { font-family:var(--hh-tekst); font-size:12px; text-transform:none; letter-spacing:normal; font-weight:600; }
.btn.u-tekst-11, .btn.u-tekst-12, .btn-licht.u-tekst-11, .btn-licht.u-tekst-12, .btn-gevaar.u-tekst-11, .btn-gevaar.u-tekst-12 { font-family:var(--hh-tekst); text-transform:none; letter-spacing:normal; font-weight:600; }
.btn { background:var(--accent); border-color:var(--accent); color:var(--accent-tekst); }
.btn:hover { filter:brightness(.92); }
/* Issue 711: alleen de hoofdknop (.btn) staat in kapitalen. Lichte en gevaar-knoppen in gewone zinsopmaak, in de letter van de kleine knoppen hierboven. */
.btn-licht { background:#fff; border-color:var(--grens); color:var(--inkt); font-family:var(--hh-tekst); text-transform:none; letter-spacing:normal; font-weight:600; }
.btn-licht:hover { border-color:#c9c4b4; }
.btn-gevaar { background:#fff; border-color:var(--gevaar); color:var(--inkt); font-family:var(--hh-tekst); text-transform:none; letter-spacing:normal; font-weight:600; }
.btn-gevaar:hover { background:var(--gevaar); color:var(--gevaar-tekst); }
.btn-klein { padding:4px 12px; }
.btn:disabled, .btn-licht:disabled, .btn-gevaar:disabled { opacity:.5; cursor:not-allowed; }
.knop-boven { margin-top:8px; }
.knop-rechts { float:right; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
input, textarea, select { width:100%; padding:8px; border:1px solid var(--veld-rand); border-radius:6px; font-family:inherit; font-size:14px; line-height:1.45; color:inherit; margin-bottom:10px; }
/* Een vinkje of keuzerondje krijgt zijn eigen breedte, niet de volle regel: anders staat het in een flex-rij midden in een lege strook (06-11-2026). */
input[type=checkbox], input[type=radio] { width:auto; }
/* Voorbeeldtekst in een veld: donker genoeg om te lezen (4,5:1 op wit), maar duidelijk lichter dan wat je zelf typt. */
::placeholder { color:#6b6b6b; opacity:1; }
label { font-size:13px; font-weight:600; color:#555; display:block; margin-bottom:3px; }
.fase { display:inline-block; padding:2px 8px; border-radius:5px; background:var(--blauw); color:#fff; font-size:12px; }
.let-op { background:var(--hh-rood-tint); border:1px solid var(--hh-rood-tint); border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:20px; }
.status-pil { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:700; text-transform:uppercase; }
.status-concept { background:#f1eee2; color:#66604f; }
.status-verzonden { background:#fff8e1; color:#8a6d1d; }
.status-akkoord { background:var(--limoen); color:var(--inkt); }
.status-afgewezen { background:#fde3df; color:#a33; }
.keuze { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--grens); border-radius:20px; padding:6px 12px; font-size:13px; cursor:pointer; background:#fff; margin:0 6px 6px 0; }
.keuze input { width:auto; margin:0; }
.naast-elkaar { display:flex; flex-wrap:wrap; align-items:baseline; }

/* Fase-voortgang (partials/fase-voortgang.blade.php) — gedeeld tussen Pipeline, Bord en de kandidaatpagina. */
.fv-stipjes { display:flex; gap:4px; margin-top:6px; }
.fv-stip { width:7px; height:7px; border-radius:50%; background:var(--grens); }
.fv-stip.fv-af { background:var(--roze); }
.fv-stip.fv-nu { outline:2px solid var(--roze); outline-offset:1px; }
.fv-stepper { display:flex; align-items:flex-start; gap:2px; margin:14px 0 18px; }
.fv-stap { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative; }
.fv-stap:not(:last-child)::after { content:''; position:absolute; top:12px; left:calc(50% + 16px); right:calc(-50% + 16px); height:2px; background:var(--grens); }
.fv-stap.fv-af:not(:last-child)::after { background:var(--roze); }
/* Merkboekje (13-10-2026): genummerde stippen met rand. Gedaan = merkkleur van de klant, nu = limoen en iets groter. */
.fv-bol { width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--inkt); color:var(--inkt); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; z-index:1; }
.fv-stap.fv-af .fv-bol { background:var(--roze); color:var(--accent-tekst); }
.fv-stap.fv-nu .fv-bol { background:var(--limoen); color:#101C68; transform:scale(1.15); }
/* De tennisbal bij wie aan zet is en de klok als balkje (partials/balletje en partials/klok-mini). */
.balletje { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--limoen); border:1.5px solid var(--inkt); position:relative; overflow:hidden; vertical-align:-2px; margin-right:5px; flex:none; }
.balletje::before { content:''; position:absolute; top:-4px; bottom:-4px; left:-7px; width:10px; border:1.5px solid var(--inkt); border-radius:50%; opacity:.55; }
.klok-mini { position:relative; height:6px; border-radius:999px; background:#ece8dc; margin:7px 0 2px; max-width:180px; }
.klok-vul { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--roze); }
.klok-over .klok-vul { background:#DF3B22; }
.klok-streep { position:absolute; top:-3px; bottom:-3px; width:2px; border-radius:1px; background:var(--inkt); }
.tweeluik { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 10px; }
.tweeluik > div { background:#f7f5ee; border:1px solid var(--grens); border-radius:10px; padding:8px 12px; font-size:13px; min-width:0; }
.tweeluik h4 { margin:0 0 3px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#6b6b6b; }
.tweeluik > div > .kop-label { margin:0 0 3px; font-size:12px; font-weight:800; color:#6b6b6b; }
@media (max-width:640px) { .tweeluik { grid-template-columns:1fr; } }
.portaalcheck { margin:8px 0 12px; }
.portaalcheck-knoppen { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.portaalcheck-knoppen .btn-licht { font-size:13px; padding:6px 14px; }
.portaalcheck-uitkomst { font-size:13px; margin-top:8px; }
.portaalcheck-kop { margin:0 0 4px; font-weight:700; }
.portaalcheck-punt { margin:0 0 2px; }
.portaalcheck .is-ok { color:#2a7a3b; }
.portaalcheck .is-mist { color:#a33; }
.portaalcheck-punt a { color:inherit; }
/* Op een telefoon: knoppen onder elkaar over de volle breedte, minstens 44px hoog (aanraakdoel), en de uitkomst als losse blokjes met een link die goed te raken is. */
@media (max-width:640px) {
  .portaalcheck-knoppen { flex-direction:column; align-items:stretch; gap:8px; }
  .portaalcheck-knoppen .btn-licht { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; font-size:14px; }
  .portaalcheck-uitkomst { font-size:14px; }
  .portaalcheck-punt { margin:0 0 8px; padding:8px 10px; border:1px solid var(--grens); border-radius:10px; }
  .portaalcheck-punt a { display:flex; align-items:center; min-height:44px; text-decoration:underline; }
}
.fv-label { font-size:12px; color:#6b6b6b; text-align:center; text-transform:uppercase; letter-spacing:.02em; max-width:70px; }
.fv-stap.fv-nu .fv-label { color:var(--inkt); font-weight:700; }
.fv-nu-tekst { display:none; font-size:12px; color:var(--inkt); font-weight:700; text-align:center; margin:0 0 14px; text-transform:uppercase; letter-spacing:.02em; }
/* Wie beweging uit heeft staan (besturingssysteem), krijgt geen lopende of stuiterende animaties: de Ted-animaties, het paneel-schuifje en de microfoonpuls (audit ONBOARDING-19). */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* ==========================================================================
   Componentklassen (interface golf 4a, deel 2, #460). Prefix .ds- (Design System) voor componenten en .u- voor hulpklassen,
   zodat er niets botst met de eigen klassen in de views (.kaart, .db-kaart, .ds-chip, ...). Voor #461: vervang inline-stijlen
   door deze klassen. Knoppen (.btn, .btn-licht, .btn-gevaar, .btn-klein), links (.link-*, .knop-link) en de status-label
   (.status-pil + .status-concept/-verzonden/-akkoord/-afgewezen) staan hierboven en worden hergebruikt, niet opnieuw gemaakt.
   De waarden zijn die van de bestaande schermen (geen visueel verschil bij overstappen); de DS-tokens bovenin zijn er voor nieuw werk.
   ========================================================================== */

/* --- Chip: kleine pil voor een eigenschap of tag (anders dan .status-pil, dat een status in hoofdletters is). Varianten: --accent, --limoen, --waarschuwing, --gevaar. --- */
.ds-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--hh-pil); background:#f1eee2; color:#555; font-size:12px; font-weight:600; line-height:1.45; white-space:nowrap; }
.ds-chip--accent { background:var(--accent-licht); color:var(--accent-leesbaar); }
.ds-chip--limoen { background:var(--limoen); color:var(--inkt); }
.ds-chip--waarschuwing { background:var(--hh-rood-tint); color:var(--hh-inkt); }
.ds-chip--gevaar { background:#fde3df; color:#a33; }
.ds-chip-rij { display:flex; flex-wrap:wrap; gap:4px 6px; }
/* --- Patroon 2, filterchips ("wat heb ik gefilterd", issue 867): een .ds-chip die een link of knop is. Eén actieve kleur, de inkt:
   die werkt bij elke merkkleur en laat de merkkleur vrij voor de primaire knop. Zet .actief of aria-pressed="true" op de gekozen chip.
   De rij is .ds-chip-rij; .ds-chip-scheiding is een dun streepje tussen groepen. Een klik op een chip verandert wat je toont, niet waar je bent (dat doet .ds-tab). --- */
a.ds-chip, button.ds-chip { border:0; padding:6px 14px; font-family:inherit; font-size:13px; cursor:pointer; text-decoration:none; }
a.ds-chip:not(.actief):hover, button.ds-chip:not(.actief):hover { background:var(--grens); text-decoration:none; }
.ds-chip.actief, .ds-chip[aria-pressed=true], .ds-chip[aria-selected=true] { background:var(--inkt); color:#fff; }
.ds-chip-rij--ruim { gap:8px; margin:14px 0; align-items:center; }
.ds-chip-rij[hidden] { display:none; }
.ds-chip--keuze { padding:6px 14px; font-size:13px; }
.ds-chip--keuze a { color:inherit; text-decoration:none; }
.ds-chip--keuze form { margin:0; }
.ds-chip--keuze .verwijder { background:none; border:0; padding:0 0 0 2px; font-size:13px; color:inherit; opacity:.6; cursor:pointer; }
.ds-chip--keuze .verwijder:hover { opacity:1; }
.ds-chip-scheiding { width:1px; height:16px; background:var(--grens); margin:0 4px; }

/* --- Kaart: compacte tegel voor in een rij (.card is de grote kaart met marge eronder). --zacht = zandvlak zonder rand, --tegel = vult de rij (cijfers), --fout / --ok = gekleurde mededeling. --- */
.ds-kaart { background:#fff; border:1px solid var(--grens); border-radius:10px; padding:14px 16px; min-width:0; }
.ds-kaart--zacht { background:#faf8f0; border-color:transparent; }
.ds-kaart--tegel { flex:1; min-width:150px; }
.ds-kaart--fout { background:#fdecec; border-color:transparent; border-radius:8px; padding:8px 12px; font-size:13px; color:#a33; }
.ds-kaart--ok { background:#e9f7ee; border-color:transparent; border-radius:8px; padding:8px 12px; font-size:13px; }
.ds-kaart-rij { display:flex; flex-wrap:wrap; gap:10px; }
.ds-kaart-kop { margin:0 0 8px; font-size:15px; font-weight:700; }
.ds-kaart-cijfer { font-size:26px; font-weight:800; line-height:1.2; }
.ds-kaart-label { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:#6b6b6b; }

/* --- Lege toestand: één rustige regel (.ds-leeg), of een kader met kop, uitleg en een knop (.ds-leeg--blok). --- */
.ds-leeg { margin:0; font-size:14px; color:#6b6b6b; }
.ds-leeg--blok { padding:24px 16px; text-align:center; border:1px dashed var(--grens); border-radius:10px; background:#fff; }
.ds-leeg-titel { margin:0 0 4px; font-size:15px; font-weight:700; color:var(--inkt); }
.ds-leeg-tekst { margin:0 0 12px; font-size:13px; color:#6b6b6b; }
.ds-leeg-tekst:last-child { margin-bottom:0; }

/* --- Patroon 1, navigatietabs ("waar ben ik", issue 867): onderlijn. De gekozen tab (.actief, aria-selected="true" of aria-current) krijgt de
   merkkleur als onderlijn en zwaardere tekst in de inkt: de vette tekst is het tweede kenmerk naast de kleur (hoog contrast, WCAG 1.4.1).
   Werkt op een link of een knop; een lange rij breekt af, nooit breder dan de pagina. --- */
.ds-tabs { display:flex; gap:4px 22px; flex-wrap:wrap; margin:0 0 20px; border-bottom:1px solid var(--grens); }
.ds-tabs[hidden] { display:none; }
.ds-tab { background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; padding:10px 0 9px; font-family:inherit; font-size:14px; font-weight:600; line-height:1.45; color:#6b6b6b; cursor:pointer; text-decoration:none; }
.ds-tab:hover { color:var(--inkt); border-bottom-color:var(--grens); text-decoration:none; }
.ds-tab.actief, .ds-tab[aria-selected=true], .ds-tab[aria-current] { color:var(--inkt); font-weight:800; border-bottom-color:var(--accent); }
.ds-tab[hidden] { display:none; }
.ds-tab .tel { font-weight:400; font-size:12px; }

/* --- Tabelrij: .ds-tabel op een <table> (compacte cellen), .ds-tabelrij op een <tr> met lijn erboven; .ds-cel voor een losse cel. --- */
.ds-tabel { width:100%; border-collapse:collapse; font-size:14px; }
.ds-tabel th, .ds-tabel td, .ds-cel { padding:6px 8px; }
.ds-tabelrij { border-top:1px solid var(--grens); }
.ds-tabelrij--kop { text-align:left; color:#6b6b6b; font-size:12px; }
/* Rij zonder tabel (een <div> of <form> met een naam links en acties rechts): lijn eronder, laatste zonder lijn. */
.ds-lijstrij { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--grens); font-size:14px; }
.ds-lijstrij:last-child { border-bottom:0; }

/* --- Balkje in een tabelcel (Analytics): .ds-balk is het spoor, .ds-balk-vulling de vulling; de breedte zet de blade als percentage. --- */
.ds-balk { display:inline-block; vertical-align:middle; width:100%; max-width:160px; height:10px; background:#f1eee2; border-radius:var(--hh-pil); overflow:hidden; }
.ds-balk-vulling { display:block; height:100%; background:var(--hh-blauw); }

/* --- Melding: gele mededeling in de pagina (een vraag, een waarschuwing, een voorstel). --waarschuwing = oranje "let op", --klein = compacter. --- */
.ds-melding { background:var(--hh-limoen-tint); border:1px solid var(--hh-limoen-tint); border-radius:10px; padding:10px 14px; font-size:13px; }
.ds-melding--waarschuwing { background:var(--hh-rood-tint); border-color:var(--hh-rood-tint); border-radius:8px; padding:8px 12px; color:var(--hh-inkt); }
.ds-melding--klein { border-radius:8px; padding:8px 10px; font-size:12px; }

/* --- Koppelingen (koppelingen/index, #507): verhuisd uit het eigen \3c style>-blok van de view, nu met de tokens van het Design System.
   Bovenaan een tegel per koppeling met aan/uit en status (naar Teamtailor's Integrations); daaronder per koppeling de kaart (.card) waar je
   koppelt, test en ontkoppelt. Alles onder .koppelingen, zodat de namen geen andere schermen raken. Staat vóór de hulpklassen, zodat een
   .u-klasse (marge, tekstgrootte) deze regels overschrijft. --- */
.koppelingen .kop-blok { scroll-margin-top:16px; }
.koppelingen .kop-blok h2 { margin:0 0 6px; font-size:20px; }
.koppelingen .kop-blok--uitgelicht { border:2px solid var(--accent); }
.koppelingen .kop-status { font-size:13px; color:var(--hh-intern-grijs); margin:0; }
.koppelingen .kop-status .punt { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--hh-seashell); margin:0 6px 1px 0; vertical-align:middle; }
.koppelingen .kop-status .punt.aan { background:var(--hh-intern-groen); }
.koppelingen .kop-fout { font-size:13px; color:#a33; margin:8px 0 0; } /* dezelfde fouttekst als .u-fout en .ds-kaart--fout */
.koppelingen .kop-acties { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.koppelingen .kop-vervang { margin-top:12px; padding:12px 14px; background:var(--creme); border-radius:8px; }
.koppelingen .kop-vervang form { margin-top:0; }
.koppelingen .kop-uitleg { font-size:14px; color:var(--hh-intern-grijs); margin:10px 0 0; }
.koppelingen .kop-resultaat { margin-top:12px; padding:10px 14px; background:var(--creme); border-radius:8px; font-size:13px; }
.koppelingen .kop-resultaat p { margin:0 0 8px; }
.koppelingen .kop-resultaat p:last-child { margin-bottom:0; }
.koppelingen .kop-veld { width:100%; max-width:480px; }
.koppelingen .kop-formulier { max-width:620px; }
.koppelingen .kop-vinkje { display:flex; gap:8px; align-items:flex-start; }
.koppelingen .kop-vinkje input { width:auto; margin:3px 0 0; }
.koppelingen .kop-adres { width:100%; margin-top:8px; font-family:monospace; font-size:13px; }
.koppelingen .kop-lijst { margin:6px 0 0; padding-left:18px; }
.koppelingen .kop-acties-cel { white-space:nowrap; }
/* De uitleg: een rustige tekstregel onder een dun lijntje; pas open een licht gekleurd blok. */
.koppelingen details.stappen { margin-top:20px; padding-top:12px; border-top:1px solid var(--grens); }
.koppelingen details.stappen summary { cursor:pointer; font-weight:500; font-size:13px; color:var(--hh-intern-grijs); list-style:none; }
.koppelingen details.stappen summary::-webkit-details-marker { display:none; }
.koppelingen details.stappen summary::before { content:"?"; display:inline-block; width:16px; height:16px; line-height:16px; text-align:center; border-radius:50%; background:var(--hh-seashell); color:var(--hh-intern-grijs); font-size:11px; margin-right:8px; }
.koppelingen details.stappen summary:hover, .koppelingen details.stappen[open] summary { color:var(--inkt); }
.koppelingen details.stappen[open] > *:not(summary) { background:var(--hh-blauw-tint); border-radius:10px; }
.koppelingen details.stappen[open] p:first-of-type { margin-top:12px; padding:14px 16px 0; }
.koppelingen details.stappen p { font-size:13px; color:var(--hh-intern-grijs); margin:10px 0 6px; }
.koppelingen details.stappen ol, .koppelingen details.stappen ul { line-height:1.6; font-size:14px; margin:6px 0; padding:0 16px 0 36px; }
.koppelingen details.stappen li { margin:5px 0; }
.koppelingen details.stappen .stappen-let { border-top:1px solid var(--grens); padding:10px 16px 14px; font-size:13px; margin:8px 0 0; border-radius:0 0 10px 10px; }
.koppelingen details.stappen .stappen-let ul { font-size:13px; }
/* Tegels bovenaan: één per koppeling, met een aan/uit-label, één regel status en een link naar de kaart eronder. */
.koppeling-tegels { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin:18px 0 26px; padding:0; list-style:none; }
.koppeling-tegel { display:flex; flex-direction:column; gap:6px; min-width:0; background:var(--hh-kaart); border:1px solid var(--grens); border-radius:10px; padding:14px 16px; }
.koppeling-tegel--aan { box-shadow:inset 4px 0 0 var(--hh-limoen); }
.koppeling-tegel--fout { box-shadow:inset 4px 0 0 var(--hh-rood); }
.koppeling-tegel-kop { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.koppeling-tegel h3 { margin:0; font-size:15px; overflow-wrap:anywhere; }
.koppeling-tegel p { margin:0; font-size:13px; color:var(--hh-intern-grijs); overflow-wrap:anywhere; }
.koppeling-tegel .koppeling-tegel-link { margin-top:auto; padding-top:4px; font-size:13px; font-weight:600; }
.koppeling-tegel--gekozen { border-color:var(--accent); outline:1px solid var(--accent); }
/* Issue #7: hoe het ophalen gaat, op de tegel en op de kaart van mail en Granola. */
.koppeling-tegel .koppeling-tegel-ophaal { font-size:12px; }
.koppeling-tegel .koppeling-tegel-ophaal--fout { color:var(--hh-rood); }
.kop-ophaal { margin:10px 0; }
.kop-ophaal .kop-ophaal-kop { margin:0 0 4px; font-size:14px; }
.kop-ophaal .kop-ophaal-lijst { margin:0; padding-left:18px; font-size:13px; }
.koppeling-alles { margin:-16px 0 22px; font-size:13px; }
.koppelingen section.kop-blok[hidden] { display:none; }

/* ==========================================================================
   Hulpklassen (.u-): de patronen die in kandidaat/kaart, crm/show, dashboard/index, instellingen/werkwijze en cijfers/index
   het vaakst als style="..." voorkomen. Marge: .u-m0 + .u-mb-N / .u-mt-N (style="margin:0 0 10px" = class="u-m0 u-mb-10").
   Dit blok staat bewust onderaan zodat een hulpklasse een componentklasse overschrijft. Niet voor elementen die een script via
   style.display aanzet of uitzet: gebruik daarvoor het hidden-attribuut.
   ========================================================================== */
.u-m0 { margin:0; }
.u-zonder-rand { border:0; padding:0; min-width:0; }
.u-mt-4 { margin-top:4px; } .u-mt-6 { margin-top:6px; } .u-mt-8 { margin-top:8px; } .u-mt-10 { margin-top:10px; } .u-mt-12 { margin-top:12px; } .u-mt-14 { margin-top:14px; }
.u-mb-0 { margin-bottom:0; } .u-mb-6 { margin-bottom:6px; } .u-mb-8 { margin-bottom:8px; } .u-mb-10 { margin-bottom:10px; } .u-mb-12 { margin-bottom:12px; } .u-mb-14 { margin-bottom:14px; }
/* Tekst */
.u-zacht { color:#6b6b6b; }
.u-grijs { color:#555; }
.u-fout { color:#a33; }
.u-accent { color:var(--accent-leesbaar); }
.u-tekst-11 { font-size:11px; } .u-tekst-12 { font-size:12px; } .u-tekst-13 { font-size:13px; } .u-tekst-14 { font-size:14px; }
.u-gewoon { font-weight:400; } .u-halfvet { font-weight:600; } .u-vet { font-weight:700; } .u-extravet { font-weight:800; }
.u-hoofdletters { text-transform:uppercase; letter-spacing:.03em; }
.u-erf-font { font-family:inherit; }
/* Toelichting onder een kop of veld: 13px zacht, 10px eronder (style="font-size:13px;color:#666;margin:0 0 10px"). */
.u-toelichting { margin:0 0 10px; font-size:13px; color:#6b6b6b; }
/* Kleine zachte regel (style="font-size:12px;color:#6b6b6b"). */
.u-klein { font-size:12px; color:#6b6b6b; }
/* Flex */
.u-flex { display:flex; } .u-flex-inline { display:inline-flex; } .u-inline { display:inline; }
.u-flex-midden { align-items:center; } .u-flex-boven { align-items:flex-start; } .u-flex-onder { align-items:flex-end; }
.u-flex-wrap { flex-wrap:wrap; } .u-tussen { justify-content:space-between; }
.u-flex-1 { flex:1; } .u-min-0 { min-width:0; } .u-niet-krimpen { flex-shrink:0; } .u-min-160 { min-width:160px; } .u-flex-180 { flex:1; min-width:180px; }
.u-ml-auto { margin-left:auto; }
.u-gap-6 { gap:6px; } .u-gap-8 { gap:8px; } .u-gap-10 { gap:10px; } .u-gap-12 { gap:12px; }
/* Rij met pictogram/tekst/knop naast elkaar (style="display:flex;gap:8px;align-items:center"). */
.u-rij { display:flex; gap:8px; align-items:center; }
.u-rij-wrap { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* Velden: de basisstijl maakt elk veld 100% breed met marge eronder; deze klassen zetten dat uit of begrenzen het. */
.u-veld-auto { width:auto; max-width:100%; margin:0; }
.u-w-auto { width:auto; } .u-w-100 { width:100%; }
.u-veld-flex { flex:1; min-width:220px; }
.u-max-120 { max-width:120px; } .u-max-200 { max-width:200px; } .u-max-240 { max-width:240px; } .u-max-260 { max-width:260px; } .u-max-420 { max-width:420px; }
/* Overig */
.u-cursor { cursor:pointer; }
.u-pre-regel { white-space:pre-line; }
.u-relatief { position:relative; }
.u-hele-rij { grid-column:1 / -1; }
.u-lijn-boven { border-top:1px solid var(--grens); }
.u-lijn-onder { border-bottom:1px solid var(--grens); }

/* cijfers/index
   Verhuisd uit het \3c style>-blok van resources/views/cijfers/index.blade.php (#461). Alles onder .cijfers, zodat .kaart,
   .toelichting, .pct enz. andere schermen niet raken. Cellen en tabelkoppen komen uit .ds-tabel. */
.cijfers .stat-rij { display:flex; gap:14px; margin-bottom:24px; flex-wrap:wrap; }
.cijfers .stat-rij--los { margin-bottom:0; }
.cijfers .stat-tegel { flex:1; min-width:150px; background:#fff; border:1px solid var(--grens); border-radius:10px; padding:16px 18px; }
.cijfers .stat-tegel .getal { font-size:28px; font-weight:800; }
.cijfers .stat-tegel .label { font-size:11px; text-transform:uppercase; color:#6b6b6b; letter-spacing:.03em; }
.cijfers .stat-tegel.accent { background:var(--roze); color:var(--accent-tekst); }
.cijfers .stat-tegel.accent .label { color:var(--accent-tekst); }
.cijfers .kaart { background:#fff; border:1px solid var(--grens); border-radius:10px; padding:20px; margin-bottom:18px; }
.cijfers .kaart h3, .cijfers .kaart h2.kop-klein { margin-top:0; }
.cijfers .kaart .toelichting { color:#6b6b6b; font-size:13px; margin-top:-8px; }
.cijfers .toelichting--hoog { margin-top:-6px; }
.cijfers .trechter-rij { padding:8px 0; border-bottom:1px solid var(--grens); }
.cijfers .trechter-kop { display:flex; align-items:center; gap:14px; }
.cijfers .trechter-kop .fasenaam { width:150px; font-size:14px; font-weight:600; }
.cijfers .trechter-kop .balk { flex:1; background:#f1eee2; border-radius:6px; overflow:hidden; height:22px; }
.cijfers .trechter-kop .balk-vulling { background:var(--blauw); height:100%; }
.cijfers .trechter-kop .aantal { width:44px; text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
.cijfers .trechter-kop .pct { width:56px; text-align:right; color:#6b6b6b; font-size:12px; }
.cijfers .trechter-detail { display:flex; gap:16px; margin:6px 0 0 164px; font-size:12px; color:#6b6b6b; flex-wrap:wrap; }
.cijfers .trechter-detail strong { color:#66604f; }
.cijfers .uitval-rij, .cijfers .langst-rij { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--grens); font-size:14px; }
.cijfers .langst-rij .dagen { font-weight:700; font-variant-numeric:tabular-nums; }
/* Periodekeuze op Cijfers: filterchips (.ds-chip), met "wissen" als gewone link ernaast. */
.cijfers .cijfers-wissen { font-size:13px; color:#6b6b6b; }
.cijfers [data-cijfers-tab][hidden] { display:none; }
.cijfers .cijfers-filter { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 0 auto; font-size:13px; }
.cijfers .cijfers-filter select, .cijfers .cijfers-filter input { margin:0; width:auto; font-size:13px; padding:5px 8px; }
.cijfers .cijfers-toon { padding:5px 12px; font-size:13px; }
.cijfers .kop-klein .cijfers-csv { float:right; font-size:13px; font-weight:600; }
.cijfers .cijfers-watjezie { margin:-6px 0 14px; font-size:14px; font-weight:600; }
.cijfers .cijfers-scroll { overflow-x:auto; }
.cijfers .unit-trechter td, .cijfers .unit-trechter th { text-align:right; font-variant-numeric:tabular-nums; }
.cijfers .unit-trechter td:first-child, .cijfers .unit-trechter th:first-child { text-align:left; }
.cijfers .unit-trechter .pct { color:#6b6b6b; font-size:12px; margin-left:4px; }
.cijfers .week-grafiek { display:flex; align-items:flex-end; gap:6px; height:110px; padding-top:10px; }
.cijfers .week-kolom { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; height:100%; }
.cijfers .week-staven { display:flex; gap:2px; align-items:flex-end; width:100%; height:100%; }
.cijfers .week-staaf { width:100%; border-radius:3px 3px 0 0; background:var(--blauw); min-height:2px; }
.cijfers .week-staaf.gesprekken { background:var(--roze); }
.cijfers .week-label { font-size:10px; color:#6b6b6b; margin-top:4px; }
.cijfers .legenda { display:flex; gap:16px; font-size:12px; color:#6b6b6b; margin-top:6px; }
.cijfers .legenda span::before { content:''; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.cijfers .legenda .l-instroom::before { background:var(--blauw); }
.cijfers .legenda .l-gesprek::before { background:var(--roze); }
.cijfers .cijfers-kolommen { display:flex; gap:24px; flex-wrap:wrap; }
.cijfers .cijfers-kolom { flex:1; min-width:260px; }
.cijfers .cijfers-kolom--smal { min-width:220px; }
.cijfers .cijfers-blokrij { padding:8px 0; border-bottom:1px solid var(--grens); }
.cijfers .cijfers-redenen { margin-top:2px; }
.cijfers .cijfers-duiding { background:#faf8f0; border-radius:8px; padding:10px 14px; font-size:14px; }

/* instellingen/werkwijze */
/* Keuzerij: een .keuze (vinkje of radio plus tekst) als blok over de hele breedte; --boven zet het vinkje bij de eerste regel van een lange tekst. */
.keuze--rij { display:flex; gap:8px; }
.keuze--boven { align-items:flex-start; }
.keuze--boven input { margin-top:3px; }
/* Toelichting onder een keuze, ingesprongen onder de tekst (26px = vinkje plus tussenruimte). Marge onder via .u-mb-N. */
.ds-keuze-uitleg { margin-top:2px; margin-left:26px; }
/* Toelichting direct onder een veld: trekt de veldmarge (10px) terug. */
.ds-veld-hint { margin-top:-6px; }
/* Getalveld midden in een zin ("Archiveren na [90] dagen"). */
.ds-veld-inline { width:90px; display:inline-block; margin:0 6px; }
/* Knop in een tekstregel die als onderstreepte link oogt (naast .knop-link). */
.knop-link--onderstreept { text-decoration:underline; }
.ds-dialoog { max-width:520px; border:1px solid var(--grens); border-radius:12px; padding:20px; }
/* Een formulier in een dialoog (issue 863: Nieuwe vacature): velden onder elkaar, op een telefoon bijna schermbreed. */
.ds-dialoog--breed { width:min(560px, calc(100% - 32px)); box-sizing:border-box; }
.ds-dialoog--breed form { display:grid; gap:10px; }
.ds-dialoog--breed label { display:block; margin-bottom:4px; }
/* Opslaanbalk onderaan een lang formulier: blijft in beeld bij scrollen. */
.ds-opslaanbalk { position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border-top:1px solid var(--grens); padding:10px 4px; margin-top:8px; }
/* Eerder inline in kandidaat/partials (#461). Marge onder via .u-mb-N, daarom staan ze vóór de extra hulpklassen hieronder.
   Keuzepil: een label om een radio of vinkje, als pil; --smal is de compactere variant. Veldlabel: label boven een los veld. Tekstvak: een vrij tekstveld met de lijn van de kaarten. */
.ds-keuzepil { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--grens); border-radius:20px; padding:6px 12px; font-size:13px; }
.ds-keuzepil--smal { gap:4px; padding:5px 12px; }
.ds-veldlabel { display:block; margin-bottom:6px; font-size:13px; color:#666; }
.ds-tekstvak { width:100%; padding:8px; border:1px solid var(--grens); border-radius:6px; }
/* Extra hulpklassen (maten die op andere schermen nog niet nodig waren). */
.u-eind { justify-content:flex-end; }
.u-gap-16 { gap:16px; }
.u-mb-4 { margin-bottom:4px; }
.u-ml-26 { margin-left:26px; }
.u-ml-4 { margin-left:4px; }
.u-max-100 { max-width:100px; } .u-max-160 { max-width:160px; } .u-max-180 { max-width:180px; } .u-max-190 { max-width:190px; } .u-max-220 { max-width:220px; } .u-max-320 { max-width:320px; }
/* Exit-vraag en aanbevelingsvraag: alleen tonen als ze ook echt gelden (21-09-2026).
   Sinds #506 staan ze in eigen blokken op Opvolging en stilte; "nps" is een keuzelijst, dus we kijken naar de gekozen optie. */
.ds-werkwijze .veld-vragenlijst, .ds-werkwijze .veld-appje { display:none; }
.ds-werkwijze form:has(input[name="nps_vorm"][value="vragenlijst"]:checked) .veld-vragenlijst { display:block; }
.ds-werkwijze form:has(input[name="nps_vorm"][value="appje"]:checked) .veld-appje { display:block; }
.ds-werkwijze .veld-aanbeveling { display:none; }
.ds-werkwijze:has(select[name="nps"] option[value="aangenomen"]:checked) .veld-aanbeveling,
.ds-werkwijze:has(select[name="nps"] option[value="beide"]:checked) .veld-aanbeveling { display:block; }

/* Opslaan per blok (#506): elk blok op een instellingenpagina heeft een eigen Opslaan-knop met een bevestiging ernaast,
   en bovenaan een langere pagina een sprongmenu naar de blokken. Kleuren uit het design system. */
.ds-blok { scroll-margin-top:16px; }
.ds-blok-opslaan { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--grens); }
.ds-blok-status { font-size:13px; color:#6b6b6b; }
.ds-blok-status--opgeslagen { color:var(--hh-intern-groen); font-weight:600; }
.ds-blok-status--fout { color:#a33; }
.ds-sprongmenu { background:var(--hh-kaart); border:1px solid var(--grens); border-radius:10px; padding:10px 14px; margin:0 0 16px; font-size:13px; }
.ds-sprongmenu ul { display:flex; flex-wrap:wrap; gap:4px 14px; list-style:none; margin:4px 0 0; padding:0; }
.ds-sprongmenu a { color:var(--link); }

/* crm/show (interface golf 4b, #461): klantpagina. De kp-blokken stonden eerst in een eigen \3c style>-blok in de view; de crm-klassen vervangen inline-stijlen. Eigen blok, zodat parallelle opruimingen van andere views niet botsen. */
.crm-naam-potlood { vertical-align:middle; }
.crm-instellen-link { margin-left:6px; }
.crm-weergave-link { margin-left:auto; }
.crm-badge-kop { font-size:12px; vertical-align:middle; }
.crm-naamform { gap:6px; flex-wrap:wrap; align-items:center; margin:-6px 0 12px; }
.crm-fout-kop { color:#a33; margin:-6px 0 12px; }
.kp-eersteregel { display:flex; gap:18px; flex-wrap:wrap; align-items:center; background:#fff; border:1px solid var(--grens); border-radius:12px; padding:12px 18px; margin:0 0 16px; font-size:14px; }
.kp-blok { margin:0 0 14px; }
.kp-blok > summary { display:flex; align-items:baseline; gap:10px; cursor:pointer; list-style:none; background:#fff; border:1px solid var(--grens); border-radius:12px; padding:12px 18px; }
.kp-blok > summary::-webkit-details-marker { display:none; }
.kp-blok > summary::before { content:"\25B8"; color:#6b6b6b; }
.kp-blok[open] > summary::before { content:"\25BE"; }
.kp-blok[open] > summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.kp-titel { font-weight:700; font-size:16px; }
.kp-sub { color:#6b6b6b; font-size:13px; }
.kp-inhoud { border:1px solid var(--grens); border-top:0; border-radius:0 0 12px 12px; padding:14px 18px 4px; background:#fff; }
.kp-inhoud > .card { border:0; padding:0 0 14px; margin:0; border-radius:0; }
.kp-inhoud > .card + .card { border-top:1px solid var(--grens); padding-top:14px; }
.kp-contacten { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin:8px 0 12px; }
.kp-contact { border:1px solid var(--grens); border-radius:12px; padding:12px 14px; background:var(--creme); display:flex; flex-direction:column; gap:6px; }
.kp-contact-kop { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:15px; }
.kp-contact-regels { display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:#555; overflow-wrap:anywhere; }
.kp-contact-pillen { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
@media (max-width:720px) { .kp-eersteregel { gap:8px 14px; } .kp-blok > summary { flex-wrap:wrap; } }
/* Meldingen en gele blokken */
.crm-melding { padding:8px 12px; border-radius:8px; font-size:13px; }
.crm-melding--ok { background:#e9f7ee; }
.crm-melding--fout { background:#fdecec; color:#a33; }
.crm-geel { background:var(--hh-rood-tint); border:1px solid var(--hh-rood-tint); }
.crm-geelblok { border-radius:8px; padding:12px 14px; margin:8px 0; font-size:13px; }
.crm-geelblok--voorstel { margin:0 0 12px; font-size:14px; }
.crm-voorstel-lijst { margin:6px 0 10px; padding-left:18px; }
.crm-code-groot { font-size:15px; }
.crm-breek { word-break:break-all; }
/* Velden en rijen */
.crm-max-170 { max-width:170px; } .crm-max-220 { max-width:220px; } .crm-max-230 { max-width:230px; } .crm-max-360 { max-width:360px; }
.crm-w-90 { width:90px; }
.crm-flex-1-160 { flex:1; min-width:160px; } .crm-flex-1-200 { flex:1; min-width:200px; }
.crm-flex-2-240 { flex:2; min-width:240px; } .crm-flex-2-260 { flex:2; min-width:260px; }
.crm-vorm { display:flex; gap:6px; flex-wrap:wrap; }
.crm-vorm--bewerken { margin:6px 0; }
.crm-vorm--toevoegen { align-items:center; margin:10px 0 0; }
.crm-vink { display:flex; gap:4px; align-items:center; margin:0; font-weight:normal; }
.crm-bewerken { display:inline-block; font-size:12px; }
.crm-hele-breedte { flex-basis:100%; }
.crm-mb-4 { margin-bottom:4px; }
.crm-ml-6 { margin-left:6px; }
.crm-onderkop { margin:-4px 0 10px; font-size:13px; color:#666; }
.crm-onderkop--ruim { margin:-8px 0 14px; }
.crm-pil-inactief { background:#eee; color:#6b6b6b; }
/* Omzet, merk, afspraken en ervaring */
.crm-omzet-rij { display:flex; gap:14px; flex-wrap:wrap; }
.crm-omzet-tegel { flex:1; min-width:150px; background:#faf8f0; border-radius:10px; padding:14px 16px; }
.crm-omzet-cijfer { font-size:26px; font-weight:800; }
.crm-logo { height:36px; background:#fff; border:1px solid var(--grens); border-radius:6px; padding:3px; }
.crm-kleurbol { width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.crm-ev-tabel { width:100%; border-collapse:collapse; margin-bottom:8px; }
.crm-ev-kop { text-align:left; font-size:12px; color:#6b6b6b; }
.crm-ev-th { padding:4px 6px; } .crm-ev-td { padding:2px 6px; }
.crm-ev-th.crm-ev-eerste { padding:4px 6px 4px 0; } .crm-ev-td.crm-ev-eerste { padding:2px 6px 2px 0; }
.crm-voorbeeld { margin-top:10px; background:#f8f6ed; border-radius:8px; padding:12px 14px; }
.crm-voorbeeld-tekst { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:13px; }
.crm-ervaring-cijfers { display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; margin-bottom:10px; }
.crm-ervaring-cijfers[hidden] { display:none; }
.crm-score { font-size:22px; }
.crm-thema { display:inline-block; background:#f1eee2; border-radius:20px; padding:2px 10px; margin:0 4px 4px 0; }
.crm-citaat { font-size:13px; padding:6px 0; border-top:1px solid var(--grens); }

/* dashboard/index */
/* Opmaak van de Start-pagina (resources/views/dashboard/index.blade.php en de partials), verhuisd uit het eigen \3c style>-blok (#461).
   Alles hangt onder .start (de wrapper in de view), want .gesprek-rij, .stil-rij, .stil-dagen en .sr-only bestaan ook als eigen regel in
   vandaag/index en bord/index en mogen daar niet veranderen. De waarden zijn ongewijzigd overgenomen (golf 1d en 3a: rustige kop, widgetraster, vaste hoogtes). */
.start .groet-sub { color:#6b6b6b; margin:0 0 20px;}
/* Widgetraster (interface golf 3a, issue #458): drie vaste blokken naast elkaar, twee op een tablet, één op een telefoon. Een brede widget (db-w2) beslaat de hele rij. */
.start .db-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:stretch;}
.start .db-w1 { grid-column:span 1;}
.start .db-w2 { grid-column:1 / -1;}
@media (max-width: 1000px) { .start .db-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .start .db-grid { grid-template-columns:minmax(0, 1fr); } .start .db-w1, .start .db-w2 { grid-column:1 / -1; } }
/* Start compact (issue 851). De Dagstart staat vast bovenaan; To Do en Deze week zijn standaard dicht; een lege widget is één regel onder het raster. */
.start .dw-blok > summary { margin-bottom:0; cursor:pointer;}
.start .dw-blok[open] > summary { margin-bottom:12px;}
.start .db-lege-blokken { padding:10px 16px;}
.start .db-lege-regel { margin:0; padding:4px 0; font-size:14px;}
.start .db-lege-regel + .db-lege-regel { border-top:1px solid var(--grens);}
.start .start-rest { display:block;}
.start .start-meer-knop { display:none;}
/* Telefoon: vaste volgorde Dagstart, Gesprekken, Taken deze week, daarna de knop "Meer op Start" (gesloten) met de rest erachter. Het raster en de
   wikkels worden voor de volgorde doorzichtig (display:contents). De klasse start-compact komt van een scriptje bovenaan Start: zonder script staat alles open. */
@media (max-width: 760px) {
  .start.start-compact { display:flex; flex-direction:column;}
  .start.start-compact .db-grid, .start.start-compact .start-rest { display:contents;}
  .start.start-compact .start-rest > *, .start.start-compact .db-grid > .widget-wrap { order:4;}
  .start.start-compact .db-grid > .widget-wrap { margin-bottom:16px;}
  .start.start-compact .db-grid > .widget-wrap[data-sleutel="gesprekken"] { order:1;}
  .start.start-compact .db-grid > .widget-wrap[data-sleutel="te_doen"] { order:2;}
  .start.start-compact .start-meer-knop { display:block; order:3; width:100%; margin:0 0 16px;}
  .start.start-compact:not(.meer-open) .start-rest > *,
  .start.start-compact:not(.meer-open) .db-grid > .widget-wrap:not([data-sleutel="gesprekken"]):not([data-sleutel="te_doen"]) { display:none !important;}
}
/* Vaste hoogte per widget: kopregel, maximaal vijf rijen en een voet met "Alles bekijken". Wat niet past scrolt binnen de widget. */
.start .widget-wrap.db-w1 > .db-kaart { height:var(--widget-hoogte, 330px); display:flex; flex-direction:column; padding:14px 16px;}
.start .widget-wrap.db-w1 > .db-kaart .db-kop { margin-bottom:8px;}
/* Een leeg blok (06-11-2026) is niet 330px hoog: alleen de kop, één regel en de voet. Staat het naast een vol blok, dan rekt het mee met de rij. */
.start .widget-wrap.db-w1 { display:flex; flex-direction:column;}
.start .widget-wrap.db-w1 > .db-kaart:has(.db-leeg) { height:auto; flex:1 1 auto; min-height:0;}
.start .widget-wrap.db-w1 > .db-kaart:has(.db-leeg) .db-lijst { flex:0 0 auto;}
.start .db-lijst { flex:1; min-height:0; overflow-y:auto;
  /* Schaduw onder en boven zodra er meer in de lijst staat dan past (06-11-2026); de witte lagen schuiven mee en dekken hem af aan het eind. */
  background:linear-gradient(#fff 30%, rgba(255,255,255,0)) top / 100% 28px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.14), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.14), transparent) bottom / 100% 10px no-repeat scroll;}
.start .db-voet { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:auto; padding-top:8px; border-top:1px solid var(--grens); font-size:13px; font-weight:600;}
.start .db-voet .zacht { font-weight:400; color:#6b6b6b;}
.start .nm-rij { padding:7px 0; border-bottom:1px solid var(--grens);}
.start .nm-rij .naam { margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;}
.start .nm-rij .naam small { color:#6b6b6b; font-weight:400;}
.start .nm-acties { display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.start .db-leeg { margin:0; font-size:14px; color:#6b6b6b;}
.start .db-lijst .stil-rij { padding:7px 0;}
.start .db-lijst .stil-rij .naam { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.start .db-lijst .stil-rij .naam small { color:#6b6b6b; font-weight:400;}
.start .db-meer > summary { cursor:pointer; list-style:none; padding:8px 0 2px; font-size:13px; font-weight:600; color:var(--link);}
.start .db-meer > summary::-webkit-details-marker { display:none;}
.start .db-rij-flex { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--grens);}
/* Alleen de rij-link vult de rij; een knop (zoals in Dagstart) houdt zijn eigen breedte en rand. */
.start .db-rij-flex > a:not(.btn-licht):not(.btn) { flex:1; min-width:0; border-bottom:0;}
.start .db-rij-flex > a.btn-licht, .start .db-rij-flex > a.btn { flex-shrink:0; }
.start .db-lijst .gesprek-rij { padding:3px 0 3px 12px; margin-bottom:0; gap:10px;}
.start .db-lijst .gesprek-rij:hover { background:transparent;}
.start .db-lijst .gesprek-rij .tijd { width:auto; min-width:44px;}
.start .te-rij { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:10px; row-gap:2px; padding:6px 0; border-bottom:1px solid var(--grens); font-size:14px;}
/* Twee regels voordat er puntjes komen; de volledige tekst staat in de title. */
.start .te-tekst { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere;}
.start .te-meta { grid-column:2; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px;}
.start .db-groep { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#6b6b6b; margin:8px 0 2px;}
.start .db-regel { margin:2px 0 0; font-size:12px; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.start .gesprek-tekst { min-width:0; flex:1;}
.start .gesprek-tekst strong, .start .gesprek-tekst small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.start .gesprek-tekst small { color:#6b6b6b;}
.start .db-tegels { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px;}
.start .db-tegel { background:#fff; border:1px solid var(--grens); border-radius:10px; padding:14px 16px; border-top:3px solid var(--grens); text-decoration:none; color:inherit; display:block;}
.start .db-tegel .num { font-size:26px; font-weight:800;}
.start .db-tegel .lbl { font-size:11px; color:#6b6b6b; text-transform:uppercase; letter-spacing:.02em;}
.start .db-tegel .db-anoniem { font-size:11px; color:#6b6b6b; margin-top:4px; text-transform:none;}
.start .db-tegel.klemtoon { border-top-color:var(--accent);}
.start .dw-rij { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px;}
.start .dw-getal { font-size:26px; font-weight:700; line-height:1.2;}
.start .dw-label { font-size:14px; color:#444;}
.start .dw-klein { font-size:13px; color:#6b6b6b; margin-top:2px;}
.start .dw-klein a { color:var(--accent-leesbaar); font-weight:600; text-decoration:underline; text-underline-offset:2px; margin-left:6px;}
.start .db-kaart { background:#fff; border:1px solid var(--grens); border-radius:10px; padding:18px 20px;}
.start .db-kop { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6b6b6b; margin-bottom:12px; gap:8px;}
.start .db-kop a { color:var(--accent-leesbaar); font-size:12px; text-transform:none; letter-spacing:normal; font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.start .db-kop .zacht { font-weight:400; text-transform:none; letter-spacing:0; color:#6b6b6b;}
.start .gesprek-rij { display:flex; gap:14px; border-left:3px solid var(--accent); padding:8px 0 8px 12px; margin-bottom:6px; text-decoration:none; color:inherit;}
.start .gesprek-rij:hover { background:#faf8f0;}
.start .gesprek-rij .tijd { font-weight:700; width:70px; flex-shrink:0; font-size:13px;}
/* Start begint rustig (interface golf 1d, issue #452): dunne nieuwsbalk, korte AI-alinea, compacte regel voor kandidaten zonder vacature en ingekorte notities. */
.start .mededeling-balk { display:flex; align-items:center; gap:12px; background:#e7e9f3; border:1px solid var(--grens); border-radius:10px; padding:4px 6px 4px 14px; margin:0 0 12px;}
.start .mededeling-balk > details { flex:1; min-width:0;}
.start .mededeling-balk summary { display:flex; align-items:baseline; gap:10px; cursor:pointer; list-style:none; padding:4px 0; white-space:nowrap; overflow:hidden;}
.start .mededeling-balk summary::-webkit-details-marker { display:none;}
.start .mededeling-kort { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:#444;}
.start .mededeling-meer { flex-shrink:0; font-size:13px; font-weight:600; color:var(--link);}
.start .mededeling-balk details[open] .mededeling-kort { display:none;}
.start .mededeling-balk details[open] .mededeling-meer { display:none;}
.start .mededeling-volledig { padding:2px 0 8px; font-size:14px; color:#444;}
.start .mededeling-volledig a { margin-left:8px; font-weight:600;}
.start .mededeling-balk form { margin:0;}
.start .mededeling-beheer { font-size:12px; color:#6b6b6b; white-space:nowrap;}
.start .ai-blok { background:#f8f6ed; border-radius:10px; padding:10px 14px; margin:0 0 14px; font-size:14px;}
.start .ai-blok p { margin:0;}
.start .notitie-kort { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--regels, 2); line-clamp:var(--regels, 2); overflow:hidden;}
.start .notitie-kort.open { display:block; -webkit-line-clamp:unset; line-clamp:unset;}
.start .lees-meer { background:none; border:0; padding:0; font:inherit; font-size:12px; font-weight:600; color:var(--link); cursor:pointer; flex-shrink:0;}
.start .lees-meer:hover { text-decoration:underline;}
.start .stil-rij { position:relative;}
.start .stil-rij > .lees-meer { position:absolute; right:0; top:10px;}
.start .stil-rij .stil-link { color:inherit; text-decoration:none; display:block;}
.start .stil-rij .stil-meta { font-size:12px; color:#6b6b6b; margin-left:8px;}
.start .stil-rij:hover .stil-link .naam { color:var(--accent-leesbaar);}
.start .notitie-actie { display:-webkit-box; font-size:12px; color:#8a5a00; margin-top:2px;}
.start .notitie-actie.open { display:block;}
.start .zonder-vacature { background:#fffdf3; border:1px solid #f0d878; border-radius:10px; padding:4px 14px; margin:0 0 14px;}
.start .zonder-vacature summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:4px 0;}
.start .zonder-vacature summary::-webkit-details-marker { display:none;}
.start .zonder-vacature .chip { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 8px; border-radius:20px; background:var(--accent); color:var(--accent-tekst); font-size:12px; font-weight:700;}
.start .zonder-vacature .zv-tekst { flex:1; min-width:0; font-size:14px;}
.start .zonder-vacature .zacht { color:#6b6b6b; font-size:13px;}
.start .zonder-vacature .zv-rij { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--grens); margin:0;}
.start .stil-rij { display:block; border-bottom:1px solid var(--grens); padding:9px 0; text-decoration:none; color:inherit;}
.start button.stil-rij { width:100%; text-align:left; background:none; border:0; font:inherit; cursor:pointer; border-radius:0;}
.start .link-fout { color:#a33;}
.start .link-vul { flex:1; min-width:0;}
.start .vink-knop { width:18px; height:18px; border:2px solid var(--accent); border-radius:5px; background:#fff; cursor:pointer; padding:0; flex-shrink:0;}
.start .uitstel-knop { background:#f4f2ea; border:1px solid var(--grens); border-radius:12px; padding:2px 8px; font-size:11px; cursor:pointer; color:#666;}
.start .fase-bol-accent { background:var(--accent); color:var(--accent-tekst); vertical-align:middle; text-decoration:none;}
.start .stil-rij:hover .naam { color:var(--accent-leesbaar);}
.start .stil-rij:last-child { border-bottom:none;}
.start .stil-rij .naam { font-weight:700; font-size:14px; margin:0;}
.start .stil-dagen { float:right; background:#fde3df; color:#a33; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;}
.start .db-snel { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px;}
.start .db-snelkoppeling { display:block; background:#fff; border:1px solid var(--grens); border-radius:10px; padding:16px; text-decoration:none; color:inherit;}
.start .db-snelkoppeling:hover { border-color:var(--accent);}
.start .db-snelkoppeling .titel { font-weight:700; margin-bottom:2px;}
.start .db-snelkoppeling .sub { font-size:12px; color:#6b6b6b;}
.start .vac-rij { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--grens);}
.start .vac-rij:last-child { border-bottom:none;}
.start .vac-rij a.titel { font-weight:700; text-decoration:none; color:var(--inkt);}
.start .vac-rij .sub { font-size:12px; color:#6b6b6b;}
.start .vac-fases { display:flex; gap:6px; align-items:center;}
.start .vac-bol { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:#f1efe8; color:#6b6b6b;}
.start .vac-bol.vol { color:#151412;}
/* Fasekoppen op Start (issue 830): 12 px, met de volle naam in <abbr title>. Op een smalle telefoon past de rij niet naast de titel; daar vervalt de kop (elke bol zegt zelf welke fase en hoeveel). */
.start .vac-fasekop { display:none; gap:6px; justify-content:flex-end; margin-bottom:4px;}
.start .vac-fasekop abbr { width:30px; text-align:center; font-size:12px; color:#6b6b6b; letter-spacing:0; white-space:nowrap; cursor:help; text-decoration:none; }
.start .vac-legenda { font-size:12px; color:#6b6b6b; margin:8px 0 0; }
@media (min-width:641px) {
  .start .vac-legenda { display:none; }
  .start .vac-fasekop { display:flex; gap:0; }
  .start .vac-fasekop abbr { width:44px; }
  .start .vac-fases { gap:0; }
  .start .vac-fases > * { margin:0 7px; }
}
.start .kengetal { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--grens); font-size:14px;}
.start .kengetal:last-child { border-bottom:none;}
.start .kengetal b { font-size:18px;}
.start .widget-kiezer { background:#fff; border:1px solid var(--grens); border-radius:10px; padding:16px 20px;}
.start .widget-kiezer label { display:flex; gap:8px; align-items:center; padding:6px 0; border-top:2px solid transparent; border-bottom:1px solid var(--grens); font-size:14px; margin:0;}
.start .widget-kiezer label:last-of-type { border-bottom:none;}
.start .widget-kiezer small { color:#6b6b6b;}
.start .widget-kiezer .handle { cursor:grab; color:#6b6b6b; font-size:15px; line-height:1; padding:2px 4px; margin-left:auto; touch-action:none; user-select:none;}
.start .widget-kiezer .handle:active { cursor:grabbing;}
.start .widget-kiezer label.sleept { opacity:.4;}
.start .widget-kiezer label.sleep-boven { border-top-color:var(--accent);}
.start .widget-kiezer label.sleep-onder { border-bottom-color:var(--accent); border-bottom-width:2px;}
.start #widgets-paneel { position:absolute; top:calc(100% + 8px); right:0; width:400px; max-width:calc(100vw - 32px); max-height:75vh; overflow:auto; z-index:50; box-shadow:0 8px 28px rgba(0,0,0,.15);}
.start .widget-vast-rij { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--grens); font-size:14px; color:#6b6b6b;}
.start .widget-vast-rij:last-of-type { border-bottom:none;}
.start .widget-stippellijn { border-top:2px dashed var(--grens); margin:14px 0 12px; padding-top:10px;}
.start .widget-wrap { position:relative;}
.start .widget-wrap.db-w1 { grid-column:span 1;}
.start .widget-wrap.db-w2 { grid-column:1 / -1;}
@media (max-width: 760px) { .start .widget-wrap.db-w1 > .db-kaart { height:auto; } .start .db-lijst { overflow:visible; } }
.start .widget-wrap.sleept { opacity:.35;}
.start .widget-wrap.sleep-boven { outline:2px dashed var(--accent); outline-offset:3px; border-radius:10px;}
.start .widget-wrap.sleep-onder { outline:2px dashed var(--accent); outline-offset:3px; border-radius:10px;}
.start .widget-tools { position:absolute; top:10px; right:12px; display:flex; align-items:center; gap:4px; opacity:0; transition:opacity .15s; z-index:2;}
.start .widget-wrap:hover .widget-tools, .start .widget-wrap:focus-within .widget-tools, .start .widget-wrap.sleept .widget-tools { opacity:1;}
.start .widget-tools .verplaats { cursor:pointer; color:#6b6b6b; background:#fff; border:1px solid var(--grens); border-radius:6px; padding:1px 6px; font-size:13px; line-height:1.4;}
.start .widget-tools .verplaats:hover { color:#151412; border-color:var(--accent);}
.start .widget-tools .handle { cursor:grab; color:#6b6b6b; font-size:15px; background:#fff; border:1px solid var(--grens); border-radius:6px; padding:2px 6px;}
.start .widget-tools .handle:active { cursor:grabbing;}
.start .widget-tools .verwijder { cursor:pointer; color:#6b6b6b; background:#fff; border:1px solid var(--grens); border-radius:6px; padding:1px 7px; font-size:14px; line-height:1.4;}
/* Raakdoel minstens 24 x 24 px (WCAG 2.5.8), ook op de telefoon waar je ze met de vinger raakt. */
.start .widget-tools .verplaats, .start .widget-tools .handle, .start .widget-tools .verwijder { display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; box-sizing:border-box;}
.start .widget-tools .verwijder:hover { color:#a33; border-color:#e3b3ac;}
.start .widget-tools .vastgezet { opacity:1; cursor:default; font-size:13px;}
.start .widget-verdeler { grid-column:1 / -1; border-top:2px dashed var(--grens); margin:2px 0 8px;}
.start .melding-knop { background:none; border:0; padding:2px 4px; font:inherit; font-size:12px; color:#6b6b6b; cursor:pointer; text-decoration:underline;}
.start .melding-knop:hover { color:#151412;}
.start .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
/* Kleuren van de fasebolletjes in de vacaturewidget; de volgorde (fk-0 t/m fk-6) is die van $faseKleuren bovenin de view. */
.start .vac-bol.vol.fk-0 { background:#e3ecff; color:#2b4ec9; text-decoration:none; }
.start .vac-bol.vol.fk-1 { background:#ffe9d6; color:#b25a17; text-decoration:none; }
.start .vac-bol.vol.fk-2 { background:#ece3ff; color:#6a3fc0; text-decoration:none; }
.start .vac-bol.vol.fk-3 { background:#fff5c2; color:#8a6d1d; text-decoration:none; }
.start .vac-bol.vol.fk-4 { background:#ffe6a3; color:#7a5a0f; text-decoration:none; }
.start .vac-bol.vol.fk-5 { background:#dff5e6; color:#1f6f43; text-decoration:none; }
.start .vac-bol.vol.fk-6 { background:#CAF24C; color:#151412; text-decoration:none; }
.start .vac-bol.vol.fk-x { background:#eee; color:#555; text-decoration:none; }
/* Losse patronen uit de inline-stijlen van de Start-pagina. */
.start .stil-dagen--accent { background:var(--accent-licht); color:var(--accent-leesbaar); }
.db-onder-16 { margin-bottom:16px; }
.db-vul-200 { flex:1; min-width:200px; }
.db-rechts { margin-left:auto; }
.db-doorstreept { text-decoration:line-through; }
.db-datum-kolom { min-width:48px; }
.db-actie-tekst { display:block; font-size:12px; color:var(--accent-leesbaar); font-weight:600; }
.db-mail-regel { margin:2px 0 0; font-size:13px; color:#555; }
.db-sinds-item { display:inline-block; margin:2px 14px 2px 0; }
.db-stappen-voet { margin-top:6px; display:flex; gap:14px; align-items:center; font-size:12px; }
.db-eerste-stappen { padding:8px 0 12px; border-bottom:1px solid var(--grens); }
.db-melding-fout { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:#fdecec; border:1px solid #f3c2c2; color:#a33; border-radius:10px; padding:10px 14px; margin:0 0 14px; font-size:14px; }
.db-melding-geel { background:var(--hh-limoen-tint); border:1px solid var(--hh-limoen-tint); border-radius:10px; padding:10px 14px; margin:0 0 14px; font-size:14px; }
/* Lijstrij met lijn eronder; gap via .u-gap-8 of .u-gap-10. */
.db-lijstrij { display:flex; align-items:center; padding:7px 0; border-bottom:1px solid var(--grens); font-size:14px; }
.db-lijstrij--p4 { padding:4px 0; }
.db-lijstrij--p5 { padding:5px 0; font-size:inherit; }
.db-lijstrij--p6 { padding:6px 0; }
.db-lijstrij--tekst-13 { font-size:13px; }
.db-lijstrij--rek { align-items:stretch; }
.db-lijstrij--zonder-lijn { border-bottom:0; }
/* Vinkje van de eerste stappen. */
.db-stap-vink { width:18px; height:18px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; border:1px solid var(--grens); background:#fff; }
.db-stap-vink--klaar { border:0; background:var(--accent); color:var(--accent-tekst); }

/* --- Kandidaten vergelijken (recruiter, vacature/vergelijken): kandidaten als kolommen, de eerste kolom blijft staan bij scrollen. --- */
.vgl-wrap { overflow-x:auto; }
.vgl { border-collapse:separate; border-spacing:0; min-width:100%; font-size:14px; }
.vgl th, .vgl td { padding:10px 12px; border-bottom:1px solid var(--grens); vertical-align:top; text-align:left; min-width:210px; }
.vgl th:first-child, .vgl td:first-child { position:sticky; left:0; background:var(--hh-kaart); min-width:140px; color:var(--hh-plaatshouder); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.vgl thead th { background:var(--hh-creme); color:var(--inkt); font-size:15px; text-transform:none; letter-spacing:0; }
.vgl ul { margin:0; padding-left:18px; }

/* --- Gesprek inplannen (kandidaat/partials/inplannen.blade.php): patronen die alleen daar voorkomen, in plaats van style=-attributen (31-10-2026). Staat bewust vóór het Palet-blok en het Telefoon-blok: SneltoetsenPaletTest en TelefoonStijlTest verbieden hex-kleuren vanaf hun eigen kop tot het einde van het bestand. --- */
.u-min-200 { min-width:200px; }
.u-gap-4 { gap:4px; }
.u-flex-kolom { flex-direction:column; }
.u-pt-10 { padding-top:10px; }
.u-max-150 { max-width:150px; } .u-max-360 { max-width:360px; }
.inplannen-verzetten { border-radius:8px; padding:10px 12px; font-size:inherit; }
/* Het vinkje of rondje houdt zijn eigen breedte, ook op de telefoon (waar main input[type=checkbox] anders 22 px breed maakt, zoals het hier tot nu toe niet deed). */
.blok-inplannen input.inplannen-vink { width:auto; margin:0; }
.inplannen-uitleg { font-size:12px; color:#666; }
.inplannen-daglabel { min-width:64px; color:#666; }
.vrij-uur { border:1px solid var(--grens); background:#fff; border-radius:6px; padding:2px 7px; font-size:12px; cursor:pointer; }
.inplannen-slots-groen .vrij-uur { border-color:#b8dba3; background:#f3faee; }
.inplannen-voorstel { background:#f3faee; border-color:#b8dba3; }
.inplannen-adres { margin:-4px 0 10px; }
.inplannen-eerst-voorstellen { font-size:12px; color:var(--hh-inkt); background:var(--hh-limoen-tint); border-radius:8px; padding:8px 10px; }
.inplannen-planlink { font-size:12px; background:var(--accent-licht); border-radius:8px; padding:8px 10px; word-break:break-all; }
/* Rustiger inplanblok (06-11-2026): ronde als keuzebalk, mensen in twee kolommen, kleine keuzepillen, samen-vrij-paneel. */
.blok-inplannen .inplannen-segment { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--grens); border-radius:8px; overflow:hidden; }
.blok-inplannen .inplannen-segment label { margin:0; cursor:pointer; }
.blok-inplannen .inplannen-segment input { position:absolute; opacity:0; width:0; height:0; margin:0; }
.blok-inplannen .inplannen-segment span { display:block; text-align:center; padding:6px 4px; font-size:13px; border-left:1px solid var(--grens); white-space:nowrap; }
.blok-inplannen .inplannen-segment label:first-child span { border-left:0; }
.blok-inplannen .inplannen-segment input:checked + span { background:var(--inkt); color:#fff; font-weight:600; }
.blok-inplannen .inplannen-segment input:focus-visible + span { outline:2px solid var(--inkt); outline-offset:-2px; }
.blok-inplannen .inplannen-mensen { display:grid; grid-template-columns:1fr; gap:2px 12px; }
.inplannen-adres-klein { display:block; font-size:11px; }
.blok-inplannen .ds-keuzepil { padding:3px 10px; font-size:12px; white-space:nowrap; }
.inplannen-samen { border:1px solid var(--grens); border-radius:8px; padding:8px 10px; margin:0 0 8px; background:#fff; }
.inplannen-samen-kop { font-size:13px; margin-bottom:4px; }
.inplannen-samen .samen-dag { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:2px 0; }
.inplannen-samen .samen-dag .inplannen-daglabel { min-width:58px; font-size:12px; }
.inplannen-samen .vrij-uur { background:#f3faee; border-color:#b8dba3; }
.inplannen-samen .vrij-uur.vrij-uur--bezet { background:#fff; border-style:dashed; color:#777; }
.inplannen-samen .vrij-uur.is-gekozen { background:var(--inkt); border-color:var(--inkt); color:#fff; }
.inplannen-samen .vrij-uur[disabled] { opacity:.4; cursor:default; }
.inplannen-samen .samen-melding { color:#666; margin:2px 0; }
/* Voorbeeld van de agenda-uitnodiging (11-11-2026): op een breed blok rechts van het formulier (blijft in beeld tijdens het scrollen), op een smal blok eronder. */
.inplannen-ruimte { container-type:inline-size; }
.inplannen-rij { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
@container (min-width: 900px) { .inplannen-rij { grid-template-columns:minmax(0,1fr) 340px; gap:24px; } .inplannen-voorbeeld { position:sticky; top:12px; } }
.inplannen-voorbeeld { border:1px solid var(--grens); border-radius:8px; padding:12px 14px; margin-top:10px; background:#fff; font-size:13px; min-width:0; }
.inplannen-voorbeeld-kop { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:#6b6b6b; }
.voorbeeld-onderwerp { margin:0 0 8px; font-size:15px; font-weight:700; overflow-wrap:anywhere; }
.voorbeeld-regel { margin:0 0 6px; overflow-wrap:anywhere; }
.voorbeeld-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#6b6b6b; }
.inplannen-voorbeeld .ds-tabs { margin:0 0 10px; }
.voorbeeld-mail { border:1px solid var(--grens); border-radius:8px; padding:10px 12px; background:#fff; }
.voorbeeld-tekst { overflow-wrap:anywhere; margin-top:10px; padding-top:10px; border-top:1px solid var(--grens); }
.voorbeeld-tekst a { text-decoration:underline; }
@container (min-width: 900px) { .inplannen-voorbeeld { max-height:calc(100vh - 24px); overflow-y:auto; } }
.voorbeeld-waarschuwingen { margin:0 0 10px; }
.voorbeeld-waarschuwingen .ds-melding { margin:0 0 4px; }
.inplannen-meer { margin:0 0 10px; }
.inplannen-meer > summary { cursor:pointer; font-size:12px; color:#666; margin-bottom:6px; }


/* instellingen/merk (verhuisd uit het \3c style>-blok van de view, #507) */
.merk-rij { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.merk-kaart { border:1px solid var(--grens); border-radius:10px; padding:12px 14px; background:#fff; }
:where(.merk-kaart) h4 { margin:0 0 4px; font-size:14px; }
:where(.merk-kaart) p { margin:0 0 8px; font-size:13px; color:#555; }
.ontwerp { display:flex; gap:12px; align-items:center; border:1px solid var(--grens); border-radius:10px; padding:10px 12px; margin:6px 0; background:#fff; }
:where(.ontwerp) input { width:auto; margin:0; }
.ontwerp .duim { width:54px; height:70px; border:1px solid var(--grens); border-radius:4px; background:#fff; overflow:hidden; flex:none; }
.ontwerp .duim i { display:block; }
/* Schets van het factuurontwerp in .duim: kopje, tekstregel en lijn (eerder inline). */
.ontwerp .duim .duim-kop { height:6px; margin:6px 5px 0; width:20px; background:#ccc; }
.ontwerp .duim .duim-regel { height:5px; margin:8px 5px 0; background:#e6e6e6; }
.ontwerp .duim .duim-lijn { height:1px; margin:4px 5px 0; background:#333; }
.ontwerp .duim .duim-lijn--dik { height:3px; }
.ontwerp .duim .duim-balk { height:18px; }
.ontwerp .duim .duim-vlak { height:12px; margin:6px 5px 0; border-radius:3px; }
.ontwerp .duim .duim-knop { height:8px; margin:5px 5px 0 25px; border-radius:3px; width:24px; }
.ontwerp .duim .duim-totaal { height:9px; margin:8px 5px 0 25px; width:24px; }
/* Vlak in de merkkleur of de lichte tint (de kleur zelf komt inline, uit de instellingen) en een kleurstaal bij het voorstel. */
.merk-vlak { border-radius:12px; padding:16px 20px; }
.merk-staal { width:26px; height:26px; border-radius:6px; border:1px solid var(--grens); display:inline-block; }

/* instellingen/partials/avg (verhuisd uit het \3c style>-blok van de view, #507) */
.avg-regel-rij { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--grens); }
.avg-regel-rij:last-child { border-bottom:none; }
.avg-acties button, .avg-acties a { font-size:13px; font-weight:600; background:none; border:none; cursor:pointer; padding:0; margin-left:12px; }
.gemarkeerd-rij { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--grens); }
.gemarkeerd-rij:last-child { border-bottom:none; }
.log-tabel td, .log-tabel th { font-size:13px; }

/* instellingen/bewaartermijnen (verhuisd uit het \3c style>-blok van de view, #507) */
.bt-rij { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--grens); font-size:14px; }
.bt-rij:last-child { border-bottom:none; }
.bt-tabel { width:100%; border-collapse:collapse; font-size:14px; }
.bt-tabel th, .bt-tabel td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--grens); }
.bt-tabel th { font-size:12px; color:#6b6b6b; text-transform:uppercase; letter-spacing:.04em; }
.bt-stil { color:#6b6b6b; font-size:13px; }

/* instellingen/gids-stap (verhuisd uit het \3c style>-blok van de view, #507) */
.gs-terug { margin-bottom:18px; font-size:13px; }
.gs-stappen { display:flex; gap:5px; margin-bottom:18px; }
.gs-stip { flex:1; height:6px; border-radius:3px; background:var(--grens); text-decoration:none; display:block; padding:9px 0; background-clip:content-box; box-sizing:content-box; } /* zichtbaar 6px, raakvlak 24px (06-11-2026) */
.gs-stip.gehad { background-color:var(--blauw); }
.gs-stip.huidig { background-color:var(--accent); }
.gs-label { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hh-blauw); margin-bottom:6px; overflow-wrap:anywhere; }
.gs-h1 { font-size:clamp(24px,4vw,32px); line-height:1.1; margin:0 0 4px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gs-status { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 10px; border-radius:999px; }
.gs-status.klaar { background:var(--limoen); color:#1a1a12; }
.gs-status.leeg { background:var(--grens); color:#4f4b3d; }
.gs-uitleg { background:var(--blauw); color:#fff; border-radius:12px; padding:16px 20px; margin:16px 0 22px; font-size:14.5px; line-height:1.5; }
.gs-nav { display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:10px; }
.gs-knop { font:inherit; font-family:var(--hh-kop); text-transform:uppercase; letter-spacing:.04em; max-width:100%; text-align:center; font-weight:700; font-size:15.5px; padding:11px 20px; border-radius:999px; text-decoration:none; display:inline-block; border:none; cursor:pointer; }
.gs-knop.volgende { background:var(--accent); color:var(--accent-tekst); }
.gs-knop.vorige { background:#fff; border:1.5px solid var(--grens); color:var(--inkt); }
.gs-knop.onzichtbaar { visibility:hidden; }
.gs-lijst { margin-top:26px; }
.gs-lijst-kop { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#6a6656; margin-bottom:8px; }
.gs-lijst a { display:block; font-size:13px; padding:6px 0; text-decoration:none; color:#6b6b6b; }
.gs-lijst a.huidig { color:var(--inkt); font-weight:700; }

/* koppelingen/partials/blueticks-stappenplan (verhuisd uit het \3c style>-blok van de view, #507) */
.bt-stappen{ margin-top:10px; max-width:560px; }
.bt-stappen ol{ list-style:none; margin:0; padding:0; }
.bt-stap{ border:1.5px solid var(--grens,#e2ddd2); border-radius:12px; padding:12px 16px; margin-bottom:10px; background:#fff; }
.bt-stap > label{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:700; font-size:14.5px; }
.bt-stap > label input{ margin-top:3px; }
.bt-stap > strong{ display:block; font-size:14.5px; }
.bt-body{ display:none; margin:8px 0 0 26px; font-size:13.5px; color:#4a4738; line-height:1.55; }
:where(.bt-body) p{ margin:0 0 6px; }
.bt-stap:first-child .bt-body,
.bt-stap:has(.bt-check:checked) + .bt-stap .bt-body{ display:block; }
.bt-stap:has(.bt-check:checked){ border-color:var(--limoen,#CAF24C); }
.bt-stap:has(.bt-check:checked) > label{ color:#6a6656; }
.bt-let{ margin-top:12px; font-size:13px; color:#4a4738; }
.bt-let ul{ margin:4px 0 0; padding-left:18px; }

/* Componenten van de instellingenpagina's (#507), eerder inline. */
/* Logo als voorbeeld naast het uploadveld (Bedrijfsgegevens en Merk), klein in een gekleurde balk, en mini in een voorbeeldmail. */
.ds-logo-voorbeeld { height:44px; max-width:180px; object-fit:contain; background:#fff; border:1px solid var(--grens); border-radius:6px; padding:4px; }
.ds-logo-klein { max-height:34px; max-width:140px; object-fit:contain; }
.ds-logo-mini { height:24px; background:#fff; border-radius:4px; padding:2px; }
/* Kleurkiezer (input type=color) voor de merkkleur. */
.ds-kleurkiezer { height:44px; width:90px; padding:2px; }
/* Ronde pasfoto in de handtekening. */
.ds-pasfoto { width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; margin-bottom:6px; }
/* Vakje voor een stap op Aan de slag: leeg of afgevinkt. */
.ds-stapvak { width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; border:1px solid var(--grens); background:#fff; }
.ds-stapvak--gedaan { background:var(--accent); border-color:var(--accent); color:var(--accent-tekst); }
/* Regel-voor-regel verschil tussen twee versies van de werkregels. */
/* Kleuren uit het Design System: toegevoegd = limoen-tint met intern-groen, verwijderd = rood-tint met een rode rand (de tekst blijft
   inkt, want rood op de rood-tint haalt geen 4,5:1). Het plus- of minteken en de verborgen tekst maken het ook zonder kleur duidelijk. */
.ds-verschil-regel { display:flex; gap:8px; padding:1px 10px 1px 6px; background:#fff; color:var(--inkt); border-left:4px solid transparent; }
.ds-verschil-regel--erbij { background:var(--hh-limoen-tint); color:var(--hh-intern-groen); border-left-color:var(--hh-intern-groen); }
.ds-verschil-regel--eraf { background:var(--hh-rood-tint); border-left-color:var(--hh-rood); }
.ds-verschil-teken { flex:0 0 1.2em; font-weight:700; white-space:pre; }
/* Linkerrand: geel = let op, groen = klaar. */
.ds-rand-klaar { border-left:4px solid #8fb996; }

/* ==========================================================================
   Hulpklassen voor de instellingen- en koppelingenpagina's (#507): de inline stijlen uit resources/views/instellingen
   en resources/views/koppelingen zijn vervangen door deze klassen en de hulpklassen hierboven. Bewust onderaan, zodat ze
   een componentklasse overschrijven, net als het blok .u- hierboven. Grijs is overal .u-zacht (#6b6b6b), niet meer #666/#777/#888.
   "Let op" volgt het Design System: de rode tint als vlak, inkt als tekst en rood als dikke rand (#584).
   ========================================================================== */
/* Componenten (instellingenpagina's) */
.ds-rand-letop { border-left:4px solid var(--hh-rood); }
.ds-melding-letop { background:var(--hh-rood-tint); padding:10px 14px; border-radius:8px; border-left:4px solid var(--hh-rood); }
.ds-voorbeeldtekst { white-space:pre-wrap; font-family:inherit; font-size:13px; background:var(--creme); border-radius:8px; padding:12px; margin-top:8px; }
/* Weergave, flex en grid */
.u-blok { display:block; }
.u-flex-basislijn { align-items:baseline; }
.u-gap-14 { gap:14px; }
.u-grid { display:grid; } .u-grid-2 { grid-template-columns:1fr 1fr; } .u-grid-170 { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); } .u-grid-180 { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } .u-grid-200 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .u-grid-220 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .u-grid-240 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .u-grid-2-3 { grid-template-columns:1fr 1.5fr; }
.u-grid-vul-170 { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.u-inline-blok { display:inline-block; }
/* Opvulling: eerst rondom, dan per as, dan per kant (zo wint de specifiekere) */
.u-p-0 { padding:0; } .u-p-2 { padding:2px; } .u-p-4 { padding:4px; } .u-p-6 { padding:6px; } .u-p-10 { padding:10px; } .u-p-12 { padding:12px; } .u-p-16 { padding:16px; }
/* Opvulling per as */
.u-px-0 { padding-inline:0; } .u-px-6 { padding-inline:6px; } .u-px-8 { padding-inline:8px; } .u-px-10 { padding-inline:10px; } .u-px-12 { padding-inline:12px; } .u-px-14 { padding-inline:14px; } .u-px-16 { padding-inline:16px; } .u-px-20 { padding-inline:20px; }
.u-py-2 { padding-block:2px; } .u-py-3 { padding-block:3px; } .u-py-4 { padding-block:4px; } .u-py-6 { padding-block:6px; } .u-py-8 { padding-block:8px; } .u-py-10 { padding-block:10px; } .u-py-12 { padding-block:12px; } .u-py-14 { padding-block:14px; }
/* Opvulling per kant */
.u-pb-6 { padding-bottom:6px; }
.u-pl-0 { padding-left:0; } .u-pl-18 { padding-left:18px; } .u-pl-20 { padding-left:20px; }
.u-pr-8 { padding-right:8px; }
.u-pt-6 { padding-top:6px; } .u-pt-14 { padding-top:14px; }
/* Marges (na .u-m0, dus "margin:0 0 10px" = class="u-m0 u-mb-10") */
.u-mb-16 { margin-bottom:16px; }
.u-ml-5 { margin-left:5px; } .u-ml-6 { margin-left:6px; } .u-ml-8 { margin-left:8px; } .u-ml-10 { margin-left:10px; }
.u-mr-5 { margin-right:5px; }
.u-mt-min8 { margin-top:-8px; } .u-mt-min6 { margin-top:-6px; } .u-mt-min4 { margin-top:-4px; } .u-mt-0 { margin-top:0; } .u-mt-2 { margin-top:2px; } .u-mt-3 { margin-top:3px; } .u-mt-16 { margin-top:16px; } .u-mt-18 { margin-top:18px; } .u-mt-22 { margin-top:22px; }
/* Tekst */
.u-breek { overflow-wrap:anywhere; }
.u-cursief { font-style:italic; }
.u-geen-streep { text-decoration:none; }
.u-kleur-erven { color:inherit; }
.u-links { text-align:left; }
.u-mono { font-family:ui-monospace,Menlo,Consolas,monospace; }
.u-nowrap { white-space:nowrap; }
.u-pre-wrap { white-space:pre-wrap; }
.u-rechts { text-align:right; }
.u-regel-15 { line-height:1.5; } .u-regel-18 { line-height:1.8; }
.u-succes { color:var(--hh-intern-groen); }
.u-tekst-15 { font-size:15px; } .u-tekst-22 { font-size:22px; }
.u-tekst-letop { color:var(--hh-inkt); }
.u-onderstreept { text-decoration:underline; text-underline-offset:2px; }
/* Breedtes */
.u-max-90 { max-width:90px; } .u-max-140 { max-width:140px; } .u-max-280 { max-width:280px; } .u-max-520 { max-width:520px; } .u-max-860 { max-width:860px; } .u-max-900 { max-width:900px; } .u-max-960 { max-width:960px; }
.u-min-220 { min-width:220px; } .u-min-230 { min-width:230px; } .u-min-240 { min-width:240px; } .u-min-260 { min-width:260px; }
/* Randen, hoeken en vlakken */
.u-bg-creme { background:var(--creme); }
.u-bg-wit { background:#fff; }
.u-bg-zacht { background:#faf8f0; }
.u-geen-rand { border:none; }
.u-gemaskeerd { -webkit-text-security:disc; text-security:disc; }
.u-rand { border:1px solid var(--grens); }
.u-rand-accent { border:1px solid var(--accent); }
.u-randkleur-accent { border-color:var(--accent); }
.u-rond-4 { border-radius:4px; } .u-rond-6 { border-radius:6px; } .u-rond-8 { border-radius:8px; } .u-rond-10 { border-radius:10px; } .u-rond-20 { border-radius:20px; } .u-rond-32 { border-radius:32px; }
.u-scroll { overflow:auto; }
.u-scroll-x { overflow-x:auto; }
.u-tabel-dicht { border-collapse:collapse; }
.u-doorgestreept { text-decoration:line-through; }
.u-boven { vertical-align:top; }

/* ==========================================================================
   Palet: de "ga naar of doe iets"-balk (Ctrl+K of /) en de lijst met sneltoetsen. Gedrag in public/js/palet.js,
   markup in resources/views/partials/palet.blade.php. Alleen tokens (--hh-*) en de bestaande app-variabelen, geen eigen kleuren.
   ========================================================================== */
.u-alleen-lezer { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ds-palet { position:fixed; inset:0; z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:12vh var(--hh-ruimte-16) 0; background:color-mix(in srgb, var(--hh-zwart) 45%, transparent); }
.ds-palet[hidden] { display:none; }
.ds-palet-doos { background:var(--hh-kaart); color:var(--hh-zwart); border-radius:var(--hh-hoek-paneel); width:min(640px, 100%); box-shadow:0 20px 60px color-mix(in srgb, var(--hh-zwart) 30%, transparent); overflow:hidden; font-size:var(--hh-tekst-app-grootte); }
.ds-palet-doos:focus { outline:none; }
.ds-palet-invoer { display:block; width:100%; box-sizing:border-box; border:0; border-bottom:1px solid var(--hh-seashell); border-radius:0; margin:0; padding:var(--hh-ruimte-16) var(--hh-ruimte-18); font-size:16px; background:transparent; color:inherit; outline:none; }
.ds-palet-invoer:focus-visible { box-shadow:inset 0 calc(-1 * var(--hh-focus)) 0 var(--hh-blauw); }
.ds-palet-lijst { max-height:50vh; overflow-y:auto; }
.ds-palet-item { display:flex; gap:var(--hh-ruimte-12); align-items:center; padding:var(--hh-ruimte-10) var(--hh-ruimte-18); text-decoration:none; color:inherit; border-bottom:1px solid var(--hh-seashell); }
.ds-palet-item:hover, .ds-palet-item[aria-selected="true"] { background:var(--hh-blauw-tint); }
.ds-palet-item[aria-selected="true"] { box-shadow:inset var(--hh-focus) 0 0 var(--hh-blauw); }
.ds-palet-soort { font-size:var(--hh-etiket-grootte); text-transform:uppercase; letter-spacing:.05em; color:var(--hh-plaatshouder); width:70px; flex-shrink:0; }
.ds-palet-tekst { min-width:0; flex:1; }
.ds-palet-sub { color:var(--hh-plaatshouder); font-size:var(--hh-klein-grootte); }
.ds-palet-toets { margin-left:auto; flex-shrink:0; font-size:var(--hh-klein-grootte); color:var(--hh-plaatshouder); }
.ds-palet-leeg { padding:var(--hh-ruimte-12) var(--hh-ruimte-18); color:var(--hh-plaatshouder); }
.ds-palet-voet { padding:var(--hh-ruimte-8) var(--hh-ruimte-18); font-size:var(--hh-klein-grootte); color:var(--hh-plaatshouder); display:flex; flex-wrap:wrap; gap:var(--hh-ruimte-14); align-items:center; }
.ds-palet-sluit { margin-left:auto; background:none; border:0; padding:var(--hh-ruimte-6); font:inherit; color:var(--hh-blauw); text-decoration:underline; cursor:pointer; }
.ds-palet-kop { margin:0; padding:var(--hh-ruimte-16) var(--hh-ruimte-18) var(--hh-ruimte-8); font-size:var(--hh-app-kop-2-grootte); }
.ds-palet-toetsen { display:grid; grid-template-columns:max-content 1fr; gap:var(--hh-ruimte-8) var(--hh-ruimte-20); margin:0; padding:var(--hh-ruimte-8) var(--hh-ruimte-18); }
.ds-palet-toetsen dt, .ds-palet-toetsen dd { margin:0; }
.ds-palet-toetsen kbd { display:inline-block; min-width:1.6em; padding:1px var(--hh-ruimte-6); border:1px solid var(--hh-seashell); border-bottom-width:2px; border-radius:var(--hh-hoek-bolletje); background:var(--hh-creme); font:inherit; font-size:var(--hh-klein-grootte); text-align:center; }
.ds-palet-noot { margin:0; padding:0 var(--hh-ruimte-18) var(--hh-ruimte-12); color:var(--hh-plaatshouder); font-size:var(--hh-klein-grootte); }
#sneltoetsen-help .btn-licht { margin:0 var(--hh-ruimte-18) var(--hh-ruimte-16); }

/* Berichtsjablonen als lijst (instellingen/berichtsjablonen, 04-11-2026): rustig, zoals Teamtailor. */
.sj-balk { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }
.sj-tabel td { vertical-align:middle; padding-top:10px; padding-bottom:10px; }
.sj-tabel .sj-naam a { color:var(--inkt); text-decoration:none; font-weight:500; }
.sj-tabel .sj-naam a:hover { text-decoration:underline; }
.sj-tabel .sj-onderwerp { color:var(--hh-intern-grijs); }
.sj-tabel .sj-acties { text-align:right; width:1%; white-space:nowrap; }
.sj-tabel tbody tr:hover { background:var(--creme); }
/* Tags (instellingen/tags): het potlood klapt hernoemen en weghalen open, rechts uitgelijnd. */
.tag-bewerk > summary { list-style:none; cursor:pointer; display:inline-flex; }
.tag-bewerk > summary::-webkit-details-marker { display:none; }
.tag-bewerk[open] > summary { background:var(--creme); }
.tag-bewerk form { justify-content:flex-end; }
/* Inklapbaar instellingenblok (x-instellingen.blok inklapbaar): titel en een statusregel, met een pijltje zoals in de zijbalk. */
.ds-blok--inklap > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; }
.ds-blok--inklap > summary::-webkit-details-marker { display:none; }
.ds-blok--inklap > summary::after { content:""; order:1; margin-left:auto; align-self:center; width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.5; }
.ds-blok--inklap[open] > summary { margin-bottom:12px; }
.ds-blok--inklap[open] > summary::after { transform:rotate(-135deg) translateY(-2px); }
.ds-blok--inklap > summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
.ds-blok-samenvatting { order:2; flex-basis:100%; font-size:13px; color:var(--hh-intern-grijs); }
/* Uitleg-knopje (issue 726): een i die op tik of klik een korte uitleg opent (details-element, werkt ook op een telefoon). */
.uitleg-knopje { position:relative; display:inline-block; vertical-align:middle; margin:0 2px; }
.uitleg-knopje > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid var(--grens); border-radius:50%; font-size:12px; font-weight:700; font-style:italic; color:var(--hh-intern-grijs); background:var(--hh-kaart); }
.uitleg-knopje > summary::-webkit-details-marker { display:none; }
.uitleg-knopje > summary:hover { color:var(--inkt); }
.uitleg-knopje > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.uitleg-knopje[open] > summary { color:var(--inkt); border-color:var(--inkt); }
.uitleg-knopje-tekst { position:absolute; z-index:20; top:100%; right:0; margin-top:4px; width:min(260px, calc(100vw - 32px)); padding:8px 10px; border:1px solid var(--grens); border-radius:8px; background:var(--hh-kaart); color:var(--inkt); font-size:13px; font-weight:400; font-style:normal; line-height:1.45; text-align:left; box-shadow:0 2px 8px rgba(0,0,0,.12); }
/* Meer uitleg (04-11-2026): de kern van een uitleg staat erboven, de details klappen pas open na een klik. */
.meer-uitleg { margin:-4px 0 10px; font-size:13px; }
.meer-uitleg > summary { list-style:none; cursor:pointer; display:inline-block; color:var(--hh-intern-grijs); text-decoration:underline; text-underline-offset:2px; }
.meer-uitleg > summary::-webkit-details-marker { display:none; }
.meer-uitleg > summary:hover, .meer-uitleg > summary:focus-visible { color:var(--accent-leesbaar); }
.meer-uitleg[open] > summary { margin-bottom:6px; }
.meer-uitleg-tekst { color:var(--hh-intern-grijs); line-height:1.5; }
.meer-uitleg-tekst > p:last-child { margin-bottom:0; }
/* Onderdelen aan/uit in groepjes (06-11-2026): per onderwerp een kopje, de vinkjes in twee kolommen. */
/* Lege staat voor een nieuwe omgeving (06-11-2026): één rustig blok met de volgende stap. */
.lege-omgeving { text-align:center; padding:34px 24px; }
/* Een knop die eruitziet als tekst, met een raakvlak dat op de telefoon goed te raken is (06-11-2026). */
.knop-tekst { background:none; border:0; font:inherit; font-size:13px; color:var(--hh-intern-grijs); cursor:pointer; padding:6px 8px; min-height:32px; border-radius:6px; }
.knop-tekst:hover { background:var(--creme); color:var(--inkt); }
.card[hidden], details.card[hidden] { display:none; }
.lege-omgeving-titel { font-weight:700; margin:0 0 6px; }
.lege-omgeving-tekst { color:var(--hh-intern-grijs); margin:0 0 16px; }
.onderdelen-groep { border:0; margin:0 0 14px; padding:0; min-width:0; }
.onderdelen-groep > legend { padding:0; margin:0 0 6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--hh-intern-grijs); }
.onderdelen-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:0 10px; }
/* Mijn meldingen als rustige lijst (06-11-2026): per melding een rij met rechts een schakelaar; de rest onder Meer. */
.meld-lijst > h3 { margin:0 0 4px; }
.meld-rij { display:block; margin:0; padding:12px 0; border-top:1px solid var(--grens); }
.meld-kop { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.meld-naam { display:flex; flex-direction:column; gap:2px; min-width:0; }
.meld-wanneer { font-size:13px; color:var(--hh-intern-grijs); }
.meld-meer { margin-top:4px; }
.meld-meer > summary { display:inline-flex; align-items:center; min-height:28px; font-size:13px; color:var(--hh-intern-grijs); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.meld-meer > summary::-webkit-details-marker { display:none; }
.meld-meer > p { font-size:14px; margin:8px 0; }
.meld-meer > ul { font-size:14px; margin:8px 0; padding-left:20px; }
.schakelaar { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px; margin:0; background:none; border:0; border-radius:8px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--inkt); }
.schakelaar-knop { position:relative; width:38px; height:22px; border-radius:999px; background:var(--grens); transition:background .15s; }
.schakelaar-knop::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--hh-kaart); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; }
.schakelaar[aria-checked="true"] .schakelaar-knop { background:var(--accent); }
.schakelaar[aria-checked="true"] .schakelaar-knop::after { transform:translateX(16px); }
.schakelaar:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.schakelaar-tekst { min-width:22px; text-align:left; }

/* Telefoon bruikbaar (375 px): geen horizontaal scrollen van de hele pagina, en raakdoelen van 44 px.
   Alles staat in media-query's: het bureaubladontwerp verandert niet. */
.ds-tabel-scroll { display:block; }
@media (max-width: 760px) {
    /* Een brede tabel scrolt binnen zijn eigen vak in plaats van de pagina breder te maken. */
    /* position:relative: ook verborgen tekst voor schermlezers (absoluut gepositioneerd) blijft binnen het scrollvak. */
    .ds-tabel-scroll { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; position:relative; }
    .ds-tabel-scroll > table { min-width:max-content; }
    .ds-tabel-scroll td, .ds-tabel-scroll th { white-space:nowrap; }
    /* Een tabel met lopende tekst (zoals Berichten): wel scrollen, maar de tekst loopt door over meerdere regels. */
    .ds-tabel-scroll--tekst > table { min-width:640px; }
    .ds-tabel-scroll--tekst td { white-space:normal; }
    .ds-tabel-scroll--tekst td.ds-tabel-lopend { min-width:260px; }
    /* Velden en lange waarden blijven binnen het scherm. */
    main input, main select, main textarea { max-width:100%; }
    main code, main pre { overflow-wrap:anywhere; white-space:pre-wrap; max-width:100%; }
    main form { min-width:0; }
    /* Raakdoelen: knoppen en velden minstens 44 px hoog. */
    .btn, .btn-licht, .btn-gevaar, .btn-klein { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
    main select, main input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height:44px; }
    main input[type=checkbox]:not(.u-alleen-lezer):not(.alleen-lezer), main input[type=radio]:not(.u-alleen-lezer):not(.alleen-lezer) { width:24px; height:24px; }
    /* Kleine knoppen die met een vinger raak moeten zijn (minimaal 24px, hier 32px). */
    .start .vink-knop { width:28px; height:28px; }
    .start .uitstel-knop, .start .widget-tools .verplaats, main .copy-btn { min-height:32px; min-width:32px; }
    main .kk-tags-knop { min-width:32px; }
}
@media (max-width: 760px) {
    .knop-nieuw, .topbar-zoek input { min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; }
    .topbar-zoek input { display:block; }
    .mobiel-menu > summary { width:44px; height:44px; }
    a.ds-chip, button.ds-chip, .ds-chip--keuze, a.tegel { min-height:44px; display:inline-flex; align-items:center; box-sizing:border-box; }
    /* Tabs: een rij die zijwaarts scrolt in plaats van af te breken, zodat de onderlijn één lijn blijft en de pagina niet breder wordt. */
    .ds-tabs { flex-wrap:nowrap; overflow-x:auto; }
    .ds-tab { flex:0 0 auto; white-space:nowrap; min-height:44px; box-sizing:border-box; }
}
@media (max-width: 760px) {
    /* Kandidaatpagina op een telefoon: snelle acties, tabs en uitklappers met een raakdoel van 44 px. */
    main .snel-acties button, main .snel-acties a, main .snel-acties summary, main .meer-lijst button { min-height:44px; display:inline-flex; align-items:center; box-sizing:border-box; }
    main .meer-lijst button { width:100%; }
    main .kp-zijbalk summary, main .kp-hoofd summary { min-height:44px; display:flex; align-items:center; }
}
@media (max-width: 760px) {
    main .kk-tags-knop { min-height:44px; display:inline-flex; align-items:center; box-sizing:border-box; }
    main .kp-hoofd a[href]:not(.btn) { display:inline-block; padding-top:12px; padding-bottom:12px; }
}
@media (max-width: 760px) {
    /* Herinnering afvinken: het vinkje blijft 24 px, het raakvlak wordt 44 px (zonder de regel hoger te maken). */
    .kk-herinnering .vink { position:relative; }
    .kk-herinnering .vink::after { content:''; position:absolute; top:-10px; right:-10px; bottom:-10px; left:-10px; }
}
@media (max-width: 860px) {
    /* Kandidaatpagina: één kolom die nooit breder wordt dan het scherm (1fr alleen rekt mee met de breedste inhoud). */
    main .kp-grid { grid-template-columns:minmax(0,1fr); }
    main .kp-hoofd, main .kp-zijbalk { min-width:0; }
}
@media (max-width: 760px) { .ds-wrap-mobiel { flex-wrap:wrap; } }
@media (max-width: 760px) {
    /* Vacaturetab Promote op een telefoon: kanaal, status en hoofdactie staan onder elkaar in plaats van in drie kolommen
       (de kop blijft voor schermlezers aanwezig). Lange links en knopteksten breken af in plaats van de pagina te verbreden. */
    .ds-tabel-stapel, .ds-tabel-stapel tbody, .ds-tabel-stapel tr, .ds-tabel-stapel td { display:block; width:100%; box-sizing:border-box; }
    .ds-tabel-stapel thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .ds-tabel-stapel td { min-width:0; overflow-wrap:anywhere; }
    .ds-tabel-stapel .btn { max-width:100%; box-sizing:border-box; text-align:center; }
}

/* Ronde 7 (06-11-2026): verborgen en afgekapte dingen. */
/* Fout die bij geen zichtbaar veld past: bovenaan in beeld (vangnet in layout.blade.php). */
.fout-vangnet { margin:0 0 14px; padding:10px 14px; border-radius:8px; background:var(--hh-rood-tint); color:var(--hh-inkt); font-weight:600; font-size:14px; }
.fout-vangnet > div + div { margin-top:4px; }
/* Bladeren door een lange lijst (Berichten). */
.ds-bladeren { display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 0 0; }
.ds-bladeren [aria-disabled="true"] { opacity:.45; pointer-events:none; }
.ds-bladeren-pagina { font-size:13px; color:var(--hh-intern-grijs); }
/* Start op een aanraakscherm: de knoppen van een blok waren onzichtbaar maar wel aantikbaar (een tik rechtsboven kon een blok
   weghalen). Nu zijn ze weg, en verschijnen ze na "Widgets aanpassen" als eigen regel boven elk blok, zonder de titel te bedekken. */
@media (hover: none) {
    .start .widget-tools { display:none; }
    .start.widgets-schikken .widget-tools { display:flex; position:static; opacity:1; justify-content:flex-end; margin:0 0 6px; }
    .start.widgets-schikken .widget-tools .handle { display:none; }
}
/* Kandidaatkaart: de uitleg bij een label staat in beeld in plaats van alleen in een zwevend tekstje. */
.kk-pil-uitleg { margin:6px 0 0; font-size:12px; color:var(--hh-intern-grijs); max-width:60ch; }
a.kk-pil-link { text-decoration:none; }
a.kk-pil-link:hover, a.kk-pil-link:focus-visible { text-decoration:underline; }

/* Kandidaatprofiel voor de hiring manager in het portaal (kandidaat/partials/kandidaatprofiel-portaal). */
.kp-portaal { padding:12px 16px; }
.kp-portaal h2 { font-size:15px; margin:0 0 6px; }
.kp-portaal h3 { font-size:13px; margin:10px 0 4px; }
.kp-portaal-wie { margin:0 0 8px; font-size:13px; color:var(--hh-intern-grijs); }
.kp-portaal-titel { margin:0 0 4px; }
.kp-portaal-tekst { white-space:pre-line; }
.kp-portaal-baan { margin:0 0 6px; }

/* Berichten die de app klaarzet (issue 852): één keuze per soort, zonder rand om de groep. */
.ds-soortkeuze { border:0; padding:0; margin:0 0 14px; min-width:0; }
.ds-soortkeuze legend { padding:0; margin:0 0 2px; }

/* Snel goedkeuren op Goedkeuren (issue 852): één concept tegelijk, schermvullend. Het is hetzelfde concept en hetzelfde formulier als
   in de lijst, alleen anders getoond; de knoppen in de balk drukken op de knoppen van het concept zelf (public/js/snel-beoordelen.js).
   De lagen liggen onder het palet (200) en boven de bovenbalk en de meldingen (50 tot 80). */
.snel-balk { position:fixed; top:0; left:0; right:0; z-index:160; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 12px; background:var(--hh-kaart); border-bottom:1px solid var(--grens); }
.snel-balk[hidden] { display:none; }
.snel-balk .snel-teller { font-weight:700; margin-right:auto; }
.snel-balk .snel-melding { flex-basis:100%; margin:0; font-size:13px; padding:6px 10px; border-radius:8px; background:var(--hh-limoen-tint); color:var(--hh-inkt); }
.snel-balk .snel-melding.is-fout { background:var(--hh-rood-tint); color:var(--hh-inkt); }
.snel-balk .snel-melding:empty { display:none; }
.snel-balk button { min-height:40px; font-size:14px; padding:6px 14px; text-transform:none; letter-spacing:normal; font-family:var(--hh-tekst); font-weight:600; }
.snel-balk kbd { display:inline-block; min-width:1.5em; margin-left:4px; padding:0 4px; border:1px solid currentColor; border-radius:4px; font:inherit; font-size:12px; text-align:center; opacity:.85; }
body.snel-stand { overflow:hidden; }
body.snel-stand .concept-rij:not(.snel-actief) { display:none; }
body.snel-stand article > :not(.snel-actief):not(:has(.snel-actief)),
body.snel-stand .concept-groep > :not(.snel-actief):not(:has(.snel-actief)) { visibility:hidden; }
.concept-rij.snel-actief { position:fixed; inset:0; z-index:150; display:block; margin:0; overflow:auto; background:var(--hh-creme); padding:var(--snel-balk-hoogte, 64px) 12px 32px; }
.concept-rij.snel-actief > input[type="checkbox"] { display:none; }
.concept-rij.snel-actief > details { max-width:860px; margin:12px auto 0; border:0; background:transparent; }
.concept-rij.snel-actief > details > summary { display:none; }
.concept-rij.snel-actief:focus { outline:none; }
@media (hover: none) {
    .snel-balk kbd { display:none; }
    .snel-balk button { min-height:44px; }
}
body.snel-stand .assistent-knop { display:none; }

/* Afwerking (issue 869). */
/* De hulpknop "Vraag of idee" ligt rechtsonder over het laatste stuk van de pagina: onderaan main en de instellingen is ruimte ter hoogte van de knop,
   zodat de laatste rij van een lijst of tabel erboven uit scrolt. De meldingen (.goedkeuren-melding) staan daar weer boven. */
body:has(.assistent-knop) main, body:has(.assistent-knop) .instellingen-wrap { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) { body:has(.assistent-knop) main, body:has(.assistent-knop) .instellingen-wrap { padding-bottom:calc(72px + env(safe-area-inset-bottom)); } }
/* viewport-fit=cover: in de liggende stand van een iPhone blijft de inhoud uit de uitsparing. */
body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
/* Een kop met een bijschrift in een inklapblok ("Gesprek inplannen" en "1e gesprek"): op de telefoon is de summary een flexvak (kandidaat-kaart.css), waarin de spatie tussen kop en bijschrift wegvalt. Daarom een vaste tussenruimte, en onder 480 px het bijschrift als blok onder de kop. */
summary:has(> h3.u-inline + .u-zacht) { column-gap:.5em; }
@media (max-width: 480px) { summary:has(> h3.u-inline + .u-zacht) { flex-direction:column; align-items:flex-start; row-gap:2px; } summary > h3.u-inline + .u-zacht { display:block; } }
/* Scrollhint voor tabellen op de telefoon: aan de rechterrand van een scrollvak met meer kolommen loopt de inhoud uit, en onder het vak staat een regel. Het script in layout.blade.php zet .scroll-meer en toont .scroll-hint. */
.scroll-hint { display:none; }
@media (max-width: 760px) {
    .scroll-meer { -webkit-mask-image:linear-gradient(to right, black calc(100% - 36px), transparent); mask-image:linear-gradient(to right, black calc(100% - 36px), transparent); }
    .scroll-hint { display:block; margin:4px 0 12px; font-size:13px; color:var(--hh-intern-grijs); text-align:right; }
    .scroll-hint[hidden] { display:none; }
}
/* Notitie met drie keuzes (issue 878): kandidaatkaart en kandidaatpagina. */
.kk-zicht { border:0; margin:0 0 6px; padding:0; display:flex; flex-wrap:wrap; gap:2px 14px; font-size:13px; }
.kk-zicht label { display:inline-flex; align-items:center; gap:6px; margin:0; min-height:28px; font-weight:400; cursor:pointer; }
.kk-zicht input { margin:0; width:auto; }
.notitie-soort { display:inline-block; font-size:11px; font-weight:600; border-radius:10px; padding:1px 8px; margin-left:4px; background:var(--hh-limoen-tint); color:var(--hh-inkt); }
@media (pointer:coarse) { .kk-zicht label { min-height:40px; } }

/* Issue 781: melding en invulveld bij "Dit moment kan niet meer" in het portaal (gesprek-portaal.blade.php). */
.gm-melding { background:var(--hh-limoen-tint); border-radius:8px; padding:10px 14px; }
.gm-veld { width:100%; max-width:420px; margin:0 0 10px; }

/* Kandidaat toevoegen, cv uitlezen (issue 822: geen inline stijlen). */
.toev-uitleg { font-size:12px; color:var(--hh-intern-grijs); margin:-4px 0 10px; }
.toev-status { font-size:13px; margin:-4px 0 10px; }
.toev-dubbel { border:1px solid var(--grens); border-radius:8px; padding:10px 12px; margin:0 0 10px; }
.toev-dubbel[hidden] { display:none; }
.btn-licht.toev-knop { padding:6px 12px; font-size:13px; }

/* Issue 731: de kandidatenlijst (resources/views/kandidaten/*) en het bericht aan een selectie. Alleen tokens en bestaande klassen. */
.kl-kop { margin-top:0; }
.kl-boven { margin-top:var(--hh-ruimte-10); }
.kl-filters { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--hh-ruimte-10) var(--hh-ruimte-14); align-items:end; }
.kl-filters input, .kl-filters select { margin-bottom:0; }
.kl-filters-breed { grid-column:1 / -1; }
.kl-tagkeuzes { display:flex; flex-wrap:wrap; gap:6px 14px; margin:4px 0 0; }
.kl-tagkeuze { display:inline-flex; align-items:center; gap:6px; font-weight:400; margin:0; min-height:44px; }
.kl-acties { display:flex; flex-wrap:wrap; gap:var(--hh-ruimte-10) var(--hh-ruimte-20); align-items:end; }
.kl-actie { display:flex; flex-wrap:wrap; gap:var(--hh-ruimte-8); align-items:end; }
.kl-actie input, .kl-actie select { margin-bottom:0; width:auto; min-width:160px; max-width:100%; }
.kl-keuzecel { width:44px; text-align:center; }
.kl-keuzecel input { margin:0; width:20px; height:20px; }
.kl-naam { font-weight:700; }
.kl-tags { display:flex; flex-wrap:wrap; gap:4px; }
.kl-bladeren { margin:var(--hh-ruimte-14) 0 0; }
.kl-lijst-bevestigen { columns:2 220px; margin:var(--hh-ruimte-10) 0; padding-left:var(--hh-ruimte-20); }
.kl-verberg { display:none; }

.ak-uitleg { font-size:12px; color:var(--hh-inkt); opacity:.8; margin:0 0 8px; }
/* Tikdoelen (issue 830): de inboxlink op Vacatures en Bel op Planning zijn minstens 24 bij 24 px (WCAG 2.5.8). */
.inbox-raakvlak { display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; text-decoration:none; }
.bel-raakvlak { display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; }
/* Een merkkleur-vlak met initialen (Talentpool): de tekstkleur die op de merkkleur minstens 4,5:1 haalt (issue 830). */
.merk-initialen { background:var(--roze); color:var(--accent-tekst); }
/* De merknaam op een wit vlak (Instellingen > Merk): de leesbare variant van de merkkleur, ook bij een lichte merkkleur. */
.merk-naam { color:var(--accent-leesbaar); }
.kanaal-fout { color:var(--hh-inkt); font-size:13px; margin:4px 0 0; }
/* Bevestigingsdialoog (public/js/hh-dialoog.js, issue 788): vervangt window.confirm, bijvoorbeeld bij afwijzen. */
.hh-dialoog { border:var(--hh-rand) solid var(--hh-inkt); border-radius:var(--hh-hoek); padding:0; width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; background:var(--hh-kaart); color:var(--hh-inkt); }
.hh-dialoog::backdrop { background:color-mix(in srgb, var(--hh-blauw) 45%, transparent); }
.hh-dialoog-doos { padding:20px; }
.hh-dialoog-kop { margin:0 0 12px; font-size:20px; line-height:1.3; overflow-wrap:anywhere; }
.hh-dialoog-namen { margin:0 0 4px; padding-left:20px; }
.hh-dialoog-rest { margin:0 0 12px; }
.hh-dialoog-label { display:block; font-weight:600; margin:12px 0 4px; }
.hh-dialoog select { width:100%; max-width:100%; }
.hh-dialoog-fout { margin:6px 0 0; padding:8px 10px; border-radius:8px; background:var(--hh-rood-tint); color:var(--hh-inkt); }
.hh-dialoog-tekst { margin:12px 0 0; }
.hh-dialoog-beheer { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.hh-dialoog-knoppen { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top:18px; }

/* --- Toegankelijkheid 5/5: een actieve tab, filter of schakelaar is niet alleen aan kleur te zien (WCAG 1.4.1, 1.4.11). ---
   Tweede kenmerk: een tab heeft vette tekst bovenop de onderlijn (.ds-tab), een filterchip en een menu-item onderstreping. De schakelaar toont al "Aan" of "Uit" (.schakelaar-tekst). */
.nav-item.actief > a, .ds-chip.actief, .ds-chip[aria-pressed=true], .ds-chip[aria-selected=true], .kk-seg button.actief { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.cijfers .week-staaf.gesprekken, .cijfers .legenda .l-gesprek::before { background-image:repeating-linear-gradient(45deg, color-mix(in srgb, var(--hh-kaart) 60%, transparent) 0 2px, transparent 2px 5px); }
/* Windows-hoog-contrast: achtergrondkleuren verdwijnen, dus randen en omlijning dragen de actieve stand. */
@media (forced-colors: active) {
  .nav-item.actief > a, .ds-tab.actief, .ds-tab[aria-selected=true], .ds-tab[aria-current], .ds-chip.actief, .ds-chip[aria-pressed=true], .ds-chip[aria-selected=true], .kk-seg button.actief, .instellingen-zijbalk a.actief { border:2px solid Highlight; outline:2px solid Highlight; outline-offset:-4px; }
  .schakelaar-knop { border:2px solid ButtonText; box-sizing:border-box; }
  .schakelaar[aria-checked="true"] .schakelaar-knop { border-color:Highlight; background:Highlight; }
  .schakelaar-knop::after { background:ButtonText; box-shadow:none; }
  .schakelaar[aria-checked="true"] .schakelaar-knop::after { background:HighlightText; }
  .cijfers .week-staaf { background:CanvasText; forced-color-adjust:none; }
  .cijfers .week-staaf.gesprekken { background:Highlight; }
}