/* Eén vormgeving voor dagelijks werk, dossiers, facturen, beheer en aanmelden. */
:root{--straal-kaart:10px;--schaduw:0 3px 16px rgba(27,57,66,.025)}
body{background:#f5f7f6;font-size:15.5px}
h1,h2,h3{text-wrap:balance}
button,input,select,textarea{font:inherit}
.schil{grid-template-columns:238px minmax(0,1fr);min-height:100dvh}
.zijbalk{background:var(--petrol);color:#fff;border:0;min-height:100dvh;height:100dvh;padding:32px 18px;gap:38px}
.zijbalk .merk{padding:0 8px}
.zijbalk .merk .blok{background:#e5efee;color:var(--petrol);border-radius:7px;width:38px;height:42px}
.zijbalk .merk b{font-size:16px}.zijbalk .merk span{color:#c0d4d6}
.zijbalk .merk .blok{color:var(--petrol)}
.zijbalk nav{gap:6px}
.zijbalk nav a{color:#d7e4e4;padding:13px 12px;font-size:15px;border-radius:7px;min-height:48px}
.zijbalk nav a:hover{background:#284b54;color:#fff}
.zijbalk nav a[aria-current]{background:#e6efee;color:var(--petrol);box-shadow:inset 3px 0 var(--oranje-rand)}
.zijbalk nav a .teller{background:#e7efee;color:var(--petrol)}
.zijbalk nav a[aria-current] .teller{background:var(--petrol);color:#fff}
.zijbalk .onder{border-color:#46616a;color:#c0d4d6;gap:8px;padding-top:22px}
.zijbalk .onder .ingelogd-als,.zijbalk .onder .knop-t{color:#fff}
.zijbalk a:focus-visible,.zijbalk button:focus-visible{outline-color:#fff;outline-offset:3px}
.zijbalk nav a[aria-current]:focus-visible{outline-color:var(--oranje)}
.portaal-kader{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px clamp(20px,3vw,40px);background:#fff;border-bottom:1px solid var(--rand-licht);font-size:13px;color:var(--gedempt)}
.portaal-kader strong{font-weight:600;color:var(--petrol)}
.portaal-kader a{text-underline-offset:4px;white-space:nowrap}
.app-main{padding:36px clamp(20px,3vw,40px) 72px;max-width:1510px}
.paginakop,.overzicht-kop,.factuur-kop,.beheer-kop{margin-bottom:30px}
.paginakop h1,.overzicht-kop h1,.factuur-kop h1,.beheer-kop h1{font-size:clamp(32px,3vw,43px);line-height:1.2;letter-spacing:-.025em}
.paginakop p,.overzicht-kop p,.beheer-kop p{font-size:16px;max-width:65ch;color:var(--gedempt);margin:12px 0 0}
.wenkbrauw{letter-spacing:.08em;font-size:12px;color:var(--gedempt);display:block;margin-bottom:8px}
.kaart{box-shadow:var(--schaduw);border-color:#dce4e3}
.kaart>.kop{padding:19px 24px}
.groep+.groep{margin-top:34px}
.groepkop{margin-bottom:14px}
.groepkop h2{font-size:19px}
a.rij{padding:21px 24px}
.rijkop{padding:14px 24px}
.werkstand{border-radius:10px;margin:26px 0;background:#fff}
.werkstand-item{padding:24px 22px}
.werkstand-item strong{font-size:34px;letter-spacing:-.03em}
.werkstand-item small{font-size:12.5px}
.zoekbalk,.factuur-filters{padding:20px;background:#edf2f1;border:1px solid #e0e7e5;border-radius:10px}
.zoekbalk input,.zoekbalk select,.factuur-filters input,.factuur-filters select{border-color:#b9c9c8}
.knop-p,.knop-s,.knop-mini{font-weight:600;border-radius:7px}
.knop-p:hover,.knop-s:hover,.knop-mini:hover{text-decoration:none}
.knop-mini{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.dossierkop{padding:2px 0 12px}
.dossierkop h1{font-size:clamp(28px,2.8vw,38px)}
.taakkaart{border-radius:10px}
.taakkaart .body{padding:24px}
.taakkaart .taakkop{padding:18px 24px}
.duo{gap:24px}
dl.gegevens>dt,dl.gegevens>dd{overflow-wrap:anywhere}
.cfg{padding:18px 24px}
.cfg.rijkop{padding:14px 24px}
.cfg-kop{padding:24px;gap:24px}
.cfg-intro{border-left:3px solid var(--mint);padding:12px 20px;margin:0 0 24px;background:#eaf1ef;max-width:80ch}
.cfg-intro p{margin:0}.cfg-intro a{text-underline-offset:3px}
.login{min-height:calc(100dvh - 34px);background:radial-gradient(ellipse at 15% 15%,#dfeae7,transparent 55%),#f5f7f6;padding:32px 20px}
.login-kaart{width:min(100%,460px);padding:40px;border:1px solid #d1dedb;border-top:4px solid var(--petrol);border-radius:12px;box-shadow:0 16px 60px #1b39420b}
.login-logo{display:block;width:min(100%,240px);height:auto;margin:0 auto 28px}
.login-kaart h1{font-size:36px;margin:22px 0 8px}
.login-kaart .veld{margin-top:22px}.login-kaart .veld input{padding:13px 14px;font-size:16px}
.login-kaart .knop-p{width:100%;margin-top:10px}
.beheer-main{max-width:1320px}
.beheer-keuze{display:flex;gap:16px;align-items:flex-end;padding:24px;background:#eaf0ee;border:1px solid #d5e1dd;border-radius:10px;margin:0 0 28px}
.beheer-keuze>div{flex:1;min-width:0}
.beheer-keuze label{display:block;margin-bottom:8px;font-weight:600}
.beheer-keuze select{display:block;width:100%;min-height:46px;border:1px solid #a8bfba;background:white;color:var(--petrol);border-radius:7px;padding:10px 14px}
.beheer-lijst{border:1px solid var(--rand);background:#fff;border-radius:10px;overflow:hidden}
.beheer-onderwerp{display:grid;grid-template-columns:40px minmax(0,1fr) 164px 24px;gap:20px;align-items:center;padding:26px 28px;text-decoration:none;color:var(--petrol);transition:background-color 140ms ease}
.beheer-onderwerp+.beheer-onderwerp{border-top:1px solid var(--rand-licht)}
.beheer-onderwerp:hover{background:#f0f5f3}.beheer-onderwerp:focus-visible{outline-offset:-4px}
.beheer-volgnummer{font-variant-numeric:tabular-nums;font-size:14px;color:var(--gedempt)}
.beheer-onderwerp h2{font:600 19px/1.35 var(--font-ui);letter-spacing:-.015em}
.beheer-onderwerp p{margin:6px 0 0;color:var(--gedempt);max-width:60ch;font-size:15px}
.beheer-status{font-size:13px;font-weight:600;color:#365950;border:1px solid #d3e1d9;background:#f3f7f4;padding:5px 9px;border-radius:4px;width:fit-content;overflow-wrap:anywhere}
.beheer-pijl{font-size:22px;color:var(--petrol-vlak)}
.beheer-detail{border:1px solid var(--rand);border-radius:10px;overflow:hidden;background:#fff}
.beheer-detailkop{background:#e8f0ed;border-bottom:1px solid var(--rand);padding:28px 32px}
.beheer-detail h2{font-size:30px;margin-top:16px}
.beheer-detail p{max-width:72ch;margin:12px 0 0}
.beheer-detailbody{padding:28px 32px}.beheer-detail h3{font:600 18px var(--font-ui)}
.beheer-detail ul{padding-left:20px;line-height:1.9}
.beheer-grens{border-left:3px solid var(--oranje-rand);padding:8px 0 8px 18px}
.beheer-acties{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px}
.beheer-acties>a:not(.knop-s){text-underline-offset:4px;font-size:14px}
.beheer-uitleg{padding:28px 0 0;max-width:78ch;color:var(--gedempt)}
.beheer-uitleg h2{font:600 17px var(--font-ui);color:var(--petrol)}
.beheer-uitleg p{margin:10px 0 0;font-size:14px}
@media(max-width:1100px){.schil{grid-template-columns:210px minmax(0,1fr)}.zijbalk{padding:28px 12px}.beheer-onderwerp{grid-template-columns:26px minmax(0,1fr) 24px;padding:22px;gap:14px}.beheer-status{grid-column:2}.beheer-pijl{grid-column:3;grid-row:1 / 3}.beheer-onderwerp .wenkbrauw{margin-bottom:6px}}
@media(max-width:700px){
 .schil{display:block}.zijbalk{min-height:0;height:auto;position:static;padding:18px 16px;gap:18px}
 .zijbalk .merk{padding:0 4px}.zijbalk nav{display:flex;overflow-x:auto;gap:6px}
 .zijbalk nav a{flex:none;padding:10px 12px;min-height:44px}.zijbalk nav a[aria-current]{box-shadow:inset 0 -3px var(--oranje-rand)}
 .zijbalk .onder{display:flex;flex-wrap:wrap;padding:12px 4px 0;margin-top:0;gap:8px 12px}
 .zijbalk .onder .rolnaam{margin:0}.zijbalk .onder form{margin-left:auto}
 .portaal-kader{padding:12px 18px;font-size:12px}.app-main{padding:26px 18px 48px}
 .werkstand-item{padding:18px 14px}.werkstand-item strong{font-size:29px}
 .zoekbalk,.factuur-filters{padding:16px}.taakkaart .body,.taakkaart .taakkop{padding:18px}
 a.rij{padding:20px 18px}.kaart>.kop{padding:18px}.cfg{padding:18px}
 .beheer-keuze{display:block;padding:18px}.beheer-keuze .knop-p{margin-top:16px;width:100%;white-space:normal}
 .beheer-onderwerp{grid-template-columns:minmax(0,1fr) 22px;padding:22px 18px}.beheer-volgnummer{display:none}
 .beheer-onderwerp>div,.beheer-onderwerp .beheer-status{grid-column:1}.beheer-pijl{grid-column:2}
 .beheer-detailkop,.beheer-detailbody{padding:22px 18px}.beheer-detail h2{font-size:26px}
 .login-kaart{padding:28px}.login-kaart h1{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.beheer-onderwerp{transition:none}}

/* Niet-beschikbare modules hebben geen link of klikactie. */
.zijbalk nav .nav-binnenkort { display:flex; align-items:center; gap:10px; padding:10px 12px; color:#67797e; }
.nav-binnenkort small { display:block; font-size:11px; line-height:1.5; }

/* Dossierverantwoordelijkheid: secundair naast de bestaande dossieracties. */
.ingelogd-label{font-size:12px;color:#c0d4d6}
.dossier-toewijzing{border-bottom:1px solid var(--rand);padding:0 0 24px;margin:0 0 24px}.dossier-toewijzing h2{font:600 17px/1.4 var(--font-ui);margin:0 0 14px}.dossier-verantwoordelijke{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}.dossier-toewijzing .overdracht-keuze[open]{flex-basis:100%;max-width:100%}.dossier-toewijzing .hint{margin-top:10px}
.dossier-toewijzing p,.dossier-toewijzing form{margin:0}.dossier-toewijzing .hint{font-size:13px;color:var(--gedempt)}
.dossier-audit>.body{padding:20px 24px}.dossier-audit>.body>p{margin-top:0;margin-bottom:16px}
.audit-regels{list-style:none;margin:0;padding:0}.audit-regels li{display:grid;grid-template-columns:minmax(130px,1fr) minmax(180px,2fr) auto;gap:6px 16px;padding:16px 0;border-bottom:1px solid var(--rand)}
.audit-regels time{font-size:13px;color:var(--gedempt)}.audit-regels small{grid-column:2/-1;color:var(--gedempt)}
@media(max-width:700px){.dossier-audit>.body{padding:18px}.dossier-rust .subtabs{flex-wrap:wrap;row-gap:0}.audit-regels li{grid-template-columns:1fr}.audit-regels small{grid-column:auto}}

.dossier-toewijzing .overdracht-keuze{border:0}.overdracht-keuze summary{padding:0;min-height:32px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:14px}.overdracht-keuze form{display:grid;gap:10px;margin-top:16px;max-width:340px}.overdracht-keuze select{min-height:44px;max-width:100%}.dossier-overdracht{max-width:650px}.dossier-overdracht>.body{padding:24px}.overdracht-acties{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}

/* Overdracht blijft in de dossiercontext, met dezelfde rustige formulierstijl. */
html.overdracht-open{overflow:hidden}
.overdracht-popup{width:min(600px,calc(100% - 48px));max-height:85vh;padding:0;border:1px solid var(--rand);border-radius:12px;background:var(--wit,#fff);color:var(--petrol);box-shadow:0 16px 48px #193d4533}
.overdracht-popup::backdrop{background:#193d4566}
.overdracht-popup-kop{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;border-bottom:1px solid var(--rand)}
.overdracht-popup-kop h2{font:600 20px/1.4 var(--font-ui);margin:0}
.overdracht-popup-kop button{font-size:26px;min-width:40px;min-height:40px}
.overdracht-popup-inhoud{padding:24px}
.overdracht-popup-inhoud form{display:grid;gap:12px}
.overdracht-popup-inhoud label{font-weight:600}
.overdracht-popup-inhoud select{width:100%;min-height:44px}
.overdracht-popup-inhoud p{margin:0 0 16px}
.overdracht-popup .overdracht-acties{margin-top:12px}
.overdracht-popup-fout{padding:0 24px 24px;margin:0}