/* Zakelijk applicatiesysteem: rustige oppervlakken, duidelijke hiërarchie en
   één compact ruimteritme. Componenten delen tokens; hun inhoud bepaalt de
   breedte in plaats van vaste tekstknopmaten. */

:root{
  --bg:#fff; --paneel:#fff; --lijn:#e6e7e9; --lijn-licht:#f0f1f2;
  --tekst:#25262b; --gedempt:#73757d; --sub:#50525a;
  --blauw:#266df0; --blauw-donker:#195bcf; --blauw-bg:#edf4ff;
  --rood:#d92d20; --rood-bg:#fff3f2; --groen:#16875b; --oranje:#b54708;
  --zacht:#fafafa; --selectie:#ececef; --tegel-lijn:#dedfe2;
  --bar-bg:rgba(255,255,255,.97); --waarschuwing-bg:#fff7ed;
  --font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-size:14px;
  /* Geometrisch systeem: alle hoofdafstanden zijn veelvouden van 4px. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --shell-h:64px;
  --control-h:36px;
  --tile-h:88px;
  --row-h:56px;
  --content-pad:16px;
  --content-max:1000px;
  --control-gap:4px;
  --tile-gap:20px;
  --radius:8px;
  --gap:24px;
  --kpi-h:80px;
  --rij-h:var(--row-h);
  --btn-h:var(--control-h);
  --schaduw:0 1px 2px rgba(16,24,40,.025);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111318; --paneel:#181b22; --lijn:#343945; --lijn-licht:#272c35;
  --tekst:#f3f4f6; --gedempt:#9ca3af; --sub:#d0d4dc;
  --blauw:#6ea0ff; --blauw-donker:#8bb2ff; --blauw-bg:#202c43;
  --rood:#ff746a; --rood-bg:#3a2021; --groen:#50c795; --oranje:#ffad66;
  --zacht:#20242c; --selectie:#2a303a; --tegel-lijn:#3a404c;
  --bar-bg:rgba(17,19,24,.97); --waarschuwing-bg:#33271c;
}
*,*::before,*::after{box-sizing:border-box;font-family:inherit;font-size:inherit}
html{font-family:var(--font-family);font-size:var(--font-size)}
body{
  margin:0;
  background:var(--bg); color:var(--tekst); line-height:1.5;
}
button,input,select,textarea{font:inherit}
b,strong,th{font-weight:650}
svg{display:block}
.hide{display:none}

/* -- lay-out -- */
.paneel{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius);padding:var(--content-pad);margin-bottom:var(--gap);box-shadow:none}
.paneel+.paneel{margin-top:0}
.sub{color:var(--sub);margin:0 0 24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Inloggen en 2FA volgen hetzelfde gecentreerde raster als de homepage. */
.auth-page{width:calc(100% - var(--content-pad) - var(--content-pad));max-width:calc(var(--content-max) - var(--content-pad) - var(--content-pad));min-height:100vh;margin:0 auto;background:var(--bg)}
.auth-workspace{display:grid;place-items:center;min-height:100vh;padding:var(--gap) 0}
.auth-card{width:min(100%,calc((var(--content-max) - (2 * var(--content-pad)) - (2 * var(--tile-gap))) / 3));margin:0;padding:var(--content-pad);border-color:var(--tegel-lijn)}
.auth-heading{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:var(--space-3);min-height:40px;margin-bottom:var(--tile-gap)}
.auth-heading-copy,.auth-heading-copy>*{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-heading-copy>span{color:var(--gedempt)}
.auth-fields{display:grid;gap:var(--space-3)}
.auth-field{display:grid;gap:var(--space-1)}
.auth-field label{margin:0}
.auth-actions{display:grid;gap:var(--control-gap);margin-top:var(--tile-gap)}
.auth-actions>.knop,.auth-actions>.stil{width:100%;margin:0}
.auth-card .msg:empty{display:none}
.auth-cancel{justify-content:center}

/* -- formulieren -- */
label{display:block;color:var(--gedempt);margin:var(--space-3) 0 var(--space-1)}
input,select{width:100%;min-height:var(--btn-h);padding:0 12px;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);color:inherit}
input[type="checkbox"],input[type="radio"]{width:auto;min-height:0;padding:0}
input:focus,select:focus{outline:2px solid var(--blauw);outline-offset:1px;border-color:var(--blauw)}
.velden{display:flex;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap}
.velden>div{flex:1;min-width:150px}
.velden label{margin-top:0}
.form-blok{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--lijn-licht)}

/* Popup (native <dialog>) */
.modal{margin:auto;width:calc(100% - 32px);max-width:440px;padding:0;
  border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);color:var(--tekst)}
.modal::backdrop{background:rgba(15,23,42,.45)}
.modal-kop{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  min-height:56px;padding:0 var(--content-pad);border-bottom:1px solid var(--lijn-licht)}
.modal-body{padding:var(--content-pad)}
.modal-body label{margin:14px 0 5px}
.modal-body label:first-child{margin-top:0}
.modal-body input,.modal-body select{margin:0}
.modal-body .hint{margin:12px 0 0}
.modal-body .msg{min-height:0;margin:10px 0 0}          /* geen permanent gat als er geen fout is */
.mono{word-break:break-all}
.cli-opdracht{display:block;margin:12px 0;padding:12px;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--bg);white-space:pre-wrap;user-select:all}
/* Acties in modals: gelijk uitgelijnd; sluiten gebeurt één keer via de kop. */
.modal-acties{display:flex;align-items:center;gap:var(--control-gap);justify-content:center;margin-top:16px}
.modal-acties>button{flex:1 1 0;max-width:170px;margin-top:0}
.koppel-modal-acties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.koppel-modal-acties>button{width:100%;max-width:none;min-width:0}

/* -- knoppen -- */
/* Alle knoppen exact even hoog (--btn-h). Hoogte via min-height (border-box),
   verticale padding uit; horizontale padding bepaalt alleen de breedte. */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--btn-h);min-height:var(--btn-h);width:auto;
  background:var(--blauw);color:#fff;border:0;border-radius:var(--radius);padding:0 16px;
  cursor:pointer;margin-top:16px}
.knop:hover{background:var(--blauw-donker)}
.knop:disabled{opacity:.5;cursor:not-allowed}
.knop.vol{width:100%}
.stil{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--btn-h);min-height:var(--btn-h);width:auto;background:var(--paneel);color:var(--sub);
  border:1px solid var(--lijn);border-radius:var(--radius);padding:0 16px;cursor:pointer}
/* Label netjes afkappen als het toch te lang is (tooltip toont de volledige tekst). */
.knop .lbl,.stil .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stil:hover{border-color:var(--blauw);color:var(--blauw)}
.stil:disabled{opacity:.5;cursor:not-allowed}
.ikoon-knop{display:inline-grid;place-items:center;width:var(--btn-h);height:var(--btn-h);flex:none;
  border-radius:var(--radius);border:1px solid var(--lijn);background:var(--paneel);color:var(--gedempt);cursor:pointer}
.ikoon-knop:hover{border-color:var(--blauw);color:var(--blauw)}
.ikoon-knop.rood:hover{border-color:var(--rood);color:var(--rood)}
.terug{display:inline-flex;align-items:center;justify-content:center;width:var(--btn-h);height:var(--btn-h);color:var(--sub);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:0;cursor:pointer;margin:0 0 16px}
.terug:hover{border-color:var(--blauw);color:var(--blauw)}
.terug .lbl{display:none}          /* icoon-only terug-knop */
.rij{display:flex;gap:var(--control-gap);flex-wrap:wrap;align-items:center}
/* Knoppen in een rij lijnen uit: reset de ingebouwde margin-top van .knop. */
.rij>.knop,.rij>.stil,.kop-rij>.knop,.kop-rij>.stil,.taak>.knop,.taak>.stil{margin-top:0}

.ico{flex:none;width:34px;height:34px;border-radius:var(--radius);background:var(--blauw-bg);color:var(--blauw);display:grid;place-items:center}
.ico.klein{width:30px;height:30px;border-radius:var(--radius)}
.ico.hoog{background:var(--rood-bg);color:var(--rood)}
.tekst{flex:1;min-width:0}
.tekst b,.tekst>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tekst b{letter-spacing:-.005em}
.tekst>span{color:var(--gedempt)}
.tekst>span::first-letter{text-transform:uppercase}
/* -- modulepagina's -- */
.kop-rij{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:var(--control-h);flex-wrap:wrap;margin-bottom:var(--gap)}
.chips{display:flex;gap:var(--control-gap);flex-wrap:wrap;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;min-height:var(--btn-h);border:1px solid var(--lijn);background:var(--paneel);border-radius:var(--radius);padding:0 14px;color:var(--sub);cursor:pointer}
.chip.aan{background:var(--selectie);border-color:var(--lijn);color:var(--tekst)}
.taak{display:flex;align-items:center;gap:var(--space-3);min-height:var(--rij-h);padding:var(--space-2) 0;border-bottom:1px solid var(--lijn-licht)}
.taak:last-child{border-bottom:0}
.taak.gedaan b{color:var(--gedempt);text-decoration:line-through}
.taak select{width:auto;padding:5px 8px}
.telaat{color:var(--rood)}
.notitie{color:var(--gedempt);white-space:normal}

/* -- meldingen en klein grut -- */
.msg{min-height:1.4em;margin:12px 0 0;color:var(--rood)}
.msg.ok{color:var(--groen)}
.hint{color:var(--gedempt);margin:8px 0 0}
.leeg-blok{color:var(--gedempt);border:1px dashed var(--lijn);border-radius:var(--radius);padding:32px;text-align:center;background:var(--paneel)}
.code{letter-spacing:.3em;text-align:center}
.dl{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:8px 20px}
.dl dt{color:var(--gedempt)}
.dl dd{margin:0}
.pill,.workspace-status{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);min-height:var(--btn-h);padding:0 16px;line-height:1;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);color:var(--blauw);white-space:nowrap}
.pill.on,.pill.ok{color:var(--groen)}
.pill.off,.pill.rood{color:var(--rood)}
.pill.wacht{color:var(--blauw)}
/* Statuslabel op de koppelkaart: even hoog als de knop ernaast. */

/* -- koppelingen -- */
.koppel-feedback:empty{display:none}
.koppel-feedback:not(:empty){margin:0 0 var(--gap);padding:10px 12px;border:1px solid currentColor;border-radius:var(--radius);background:var(--paneel)}
.koppel-grid{width:100%;gap:var(--tile-gap)}
.koppel-tegel{width:100%}
.koppel-tegel>.pill{pointer-events:none}
.koppel-detail{display:grid;gap:var(--tile-gap)}
.koppel-detail-status{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--space-3)}
.koppel-detail-status>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.koppel-detail-acties{display:grid;gap:var(--control-gap)}
.koppel-detail-acties>.knop,.koppel-detail-acties>.stil{width:100%;margin:0}
.koppel-aanvraag{padding:12px;border:1px solid var(--oranje);border-radius:var(--radius);background:var(--waarschuwing-bg);text-align:center}
.koppel-aanvraag>p{margin:4px 0 12px;color:var(--sub)}
.koppel-aanvraag-acties{display:flex;align-items:center;justify-content:center;gap:var(--control-gap)}
.koppel-aanvraag>b+.koppel-aanvraag-acties{margin-top:12px}
.koppel-aanvraag-acties>.knop,.koppel-aanvraag-acties>.stil{width:auto;min-width:120px;margin:0}

/* -- PostNL binnen Winkel -- */
.postnl-status{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);margin:0}
.postnl-status-copy{display:block;min-width:0}
.postnl-status-copy>*{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postnl-status-copy>span{color:var(--gedempt)}
.postnl-menu{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;width:100%;padding:0}
.postnl-form,.postnl-zoek,.postnl-resultaat{width:100%;margin:0}
.postnl-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.postnl-form-grid>div{min-width:0}
.postnl-form-grid label{margin:0 0 var(--space-1)}
.postnl-form-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--control-gap);margin-top:var(--tile-gap)}
.postnl-form-actions>.knop,.postnl-form-actions>.stil{width:100%;min-width:0;margin:0}
.postnl-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--control-gap)}
.postnl-inline>.knop,.postnl-inline>.stil{margin:0}
.postnl-zoek>label{margin-top:0}
.postnl-checkout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.postnl-checkout-grid>.paneel{margin:0}
.postnl-card-kop{display:flex;align-items:center;gap:var(--space-3);min-height:34px;margin-bottom:var(--space-3)}
.postnl-compact-list{display:grid}
.postnl-compact-list>div{min-width:0;padding:var(--space-2) 0;border-bottom:1px solid var(--lijn-licht)}
.postnl-compact-list>div:last-child{border-bottom:0}
.postnl-compact-list span,.postnl-compact-list strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postnl-compact-list span{color:var(--gedempt)}
.postnl-groot{display:block;color:var(--blauw)}
.postnl-error-text{margin:0;color:var(--rood)}
.postnl-tijdlijn{display:grid}
.postnl-tijdlijn-regel{display:grid;grid-template-columns:12px minmax(0,1fr);gap:var(--space-3);min-height:var(--row-h);padding:var(--space-2) 0;border-bottom:1px solid var(--lijn-licht)}
.postnl-tijdlijn-regel:last-child{border-bottom:0}
.postnl-tijdlijn-regel>span:last-child>*{display:block}
.postnl-tijdlijn-regel>span:last-child>span{color:var(--gedempt)}
.postnl-punt{width:10px;height:10px;margin-top:5px;border:2px solid var(--blauw);border-radius:50%;background:var(--paneel)}

/* KPI-tegels: flex zodat elke rij flush vult; gelijke hoogte via min-height */
.kpi-rij{display:flex;flex-wrap:wrap;gap:var(--gap);margin-bottom:var(--gap)}
.kpi{flex:1 1 140px;display:flex;flex-direction:column;justify-content:center;min-height:var(--kpi-h);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius);padding:12px 16px}
.kpi-label{color:var(--gedempt)}
.kpi-waarde{color:var(--tekst);font-weight:650;letter-spacing:-.02em}
.kpi-sub{color:var(--gedempt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Grafiek */
.grafiek{padding-top:6px}
.grafiek-svg{max-width:100%}

/* Klikbare lijstrijen + uitlijning */
.taak.klikbaar{cursor:pointer;border-radius:var(--radius);margin:0 -10px;padding-left:10px;padding-right:10px}
.taak.klikbaar:hover{background:var(--lijn-licht)}
.taak.ongelezen b::before{content:"● ";color:var(--blauw)}
.bedrag{flex:none;white-space:nowrap;color:var(--sub)}
/* ===== Mollie financieel overzicht ===== */
.mollie-onboarding{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3)}
.mollie-onboarding-tekst{min-width:0}
.mollie-onboarding-tekst>*{display:block}
.mollie-onboarding-tekst .hint{margin-top:3px}
.mollie-onboarding>.stil{width:auto;margin:0}

.mollie-command{padding:0;overflow:hidden}
.mollie-command-kop{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px;padding:var(--space-3) var(--content-pad)}
.mollie-identiteit{display:flex;align-items:center;gap:12px;min-width:0}
.mollie-identiteit>span:last-child{min-width:0}
.mollie-identiteit>span:last-child>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mollie-identiteit>span:last-child>span:last-child{color:var(--gedempt)}
.mollie-command-acties{display:flex;align-items:center;gap:var(--control-gap);flex:none}
.mollie-command .stil{width:auto;margin:0}
.mollie-saldo-keuze{width:auto;max-width:220px;height:var(--btn-h);margin:0;padding:0 32px 0 10px}
.mollie-saldo-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--lijn-licht);background:var(--bg)}
.mollie-saldo-strip>span{min-width:0;padding:12px 16px;border-left:1px solid var(--lijn-licht)}
.mollie-saldo-strip>span:first-child{border-left:0}
.mollie-saldo-strip>span>span,.mollie-saldo-strip>span>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mollie-saldo-strip>span>span{color:var(--gedempt)}
.mollie-saldo-strip>span>b{color:var(--sub)}
.mollie-saldo-strip>.mollie-saldo-hoofd>b{color:var(--blauw)}

.mollie-hoofdnav{display:flex;height:var(--btn-h);margin-bottom:var(--gap);overflow-x:auto;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel)}
.mollie-hoofdnav button{display:flex;align-items:center;justify-content:center;flex:1;min-width:120px;height:100%;padding:0 12px;border:0;border-left:1px solid var(--lijn);background:var(--paneel);color:var(--sub);cursor:pointer;white-space:nowrap}
.mollie-hoofdnav button:first-child{border-left:0}
.mollie-hoofdnav button:hover{background:var(--blauw-bg);color:var(--blauw)}
.mollie-hoofdnav button.aan{background:var(--selectie);color:var(--tekst);font-weight:650}
.mollie-subnav{display:flex;gap:var(--control-gap);height:var(--btn-h);margin-bottom:var(--gap);overflow-x:auto}
.mollie-subnav button{display:flex;align-items:center;justify-content:center;flex:none;min-width:0;height:100%;padding:0 14px;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);color:var(--sub);cursor:pointer;white-space:nowrap}
.mollie-subnav button:hover{border-color:var(--blauw);color:var(--blauw)}
.mollie-subnav button.aan{border-color:var(--blauw);background:var(--blauw-bg);color:var(--blauw)}

.mollie-dashboard{display:grid;gap:var(--gap)}
.mollie-dashboard>.paneel{margin-bottom:0}
.mollie-dashboard>.mollie-fout{margin:0}
.mollie-bron,.mollie-signalen{padding:0;overflow:hidden}
.mollie-paneel-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 16px;border-bottom:1px solid var(--lijn-licht);background:var(--bg)}
.mollie-paneel-kop>span{min-width:0}
.mollie-paneel-kop>span>span,.mollie-paneel-kop>span>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mollie-paneel-kop>span>span{color:var(--gedempt)}
.mollie-paneel-kop>.stil{width:auto;margin:0;flex:none}
.mollie-signalen{margin-bottom:0}
.mollie-signaal-lijst{display:grid;padding:6px 16px}
.mollie-signaal-lijst button{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:10px 0;text-align:left;border:0;border-bottom:1px solid var(--lijn-licht);background:var(--paneel);color:inherit;cursor:pointer}
.mollie-signaal-lijst button:last-child{border-bottom:0}
.mollie-signaal-lijst button:hover b{color:var(--blauw)}
.mollie-signaal-lijst button>span:last-child>*{display:block}
.mollie-signaal-lijst button>span:last-child>span{color:var(--gedempt)}
.mollie-rapport-bediening{display:flex;align-items:end;gap:var(--space-3);padding:var(--space-3) var(--content-pad);border-bottom:1px solid var(--lijn-licht)}
.mollie-rapport-bediening label{display:grid;gap:4px;color:var(--gedempt)}
.mollie-rapport-bediening input{height:var(--control-h);min-height:var(--control-h);margin:0}
.mollie-rapport-bediening>.stil{width:auto;height:var(--control-h);min-height:var(--control-h);margin:0}
.mollie-rapport-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:16px;border-bottom:1px solid var(--lijn-licht)}
.mollie-rapport-kpis>span{min-width:0;padding:10px;border:1px solid var(--lijn-licht);border-radius:var(--radius);background:var(--bg)}
.mollie-rapport-kpis>span>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mollie-rapport-kpis>span>span:first-child{color:var(--gedempt)}
.mollie-rapport-kpis>span>span:last-child{color:var(--blauw)}
.mollie-lijst{padding:0 16px}
.mollie-regel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4);min-height:var(--row-h);padding:var(--space-2) 0;border-bottom:1px solid var(--lijn-licht)}
.mollie-regel:last-child{border-bottom:0}
.mollie-regel-tekst{min-width:0}
.mollie-regel-tekst>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mollie-regel-tekst>span:nth-child(2),.mollie-regel-detail{color:var(--gedempt)}
.mollie-regel-rechts{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.mollie-regel .bedrag{min-width:88px;text-align:right;color:var(--tekst)}

.mollie-fout{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:12px;padding:12px 14px;border:1px solid var(--rood);border-radius:var(--radius);background:var(--rood-bg);color:var(--tekst)}
.mollie-fout>span:nth-child(2)>span{display:block}
.mollie-fout>span:nth-child(2)>span:last-child{color:var(--rood)}
.mollie-fout-acties{display:flex;gap:var(--control-gap)}
.mollie-fout .stil{width:auto;margin:0;background:var(--paneel)}
td.num,th.num{text-align:right;white-space:nowrap}
td.af{color:var(--rood)}
td.bij{color:var(--groen)}
.totaal{margin:12px 0 0;text-align:right;color:var(--sub)}
.mailtekst{white-space:pre-wrap;color:var(--sub)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.verdeelbalk{display:flex;height:40px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--lijn);margin:4px 0 14px}
.verdeelbalk .deel{display:grid;place-items:center;color:#fff;background:var(--blauw);min-width:0;overflow:hidden;white-space:nowrap}
.verdeelbalk .deel:nth-child(2){background:var(--blauw-donker)}
.verdeelbalk .deel span{padding:0 8px;overflow:hidden;text-overflow:ellipsis}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;vertical-align:middle;padding:9px 8px;border-bottom:1px solid var(--lijn-licht);white-space:nowrap}
th{color:var(--gedempt)}

/* -- account -- */
.account-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);height:var(--tile-h);min-width:0;padding:0 var(--content-pad);border:1px solid var(--tegel-lijn);border-radius:var(--radius);background:var(--paneel)}
.account-avatar{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--radius);background:var(--blauw-bg);color:var(--blauw)}
.account-naam{flex:1;min-width:0}
.account-naam>strong,.account-naam>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-naam>span{color:var(--gedempt)}
.account-card>.stil{width:auto;margin:0}
.account-card>.pill{justify-self:end}

/* ===== Meta Ads live ===== */
.meta-melding{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3)}
.meta-melding>span:nth-child(2)>span{display:block}
.meta-melding>.stil{width:auto;margin:0}
.meta-account{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:64px;padding:var(--space-3) var(--content-pad)}
.meta-account>div{display:flex;align-items:center;gap:12px;min-width:0}
.meta-account>div>span:last-child{min-width:0}
.meta-account>div>span:last-child>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-account>.stil{width:auto;margin:0}
.meta-bediening{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px}
.meta-bediening>.hint{margin:0;text-align:right}
.meta-periodes{display:flex;height:var(--btn-h);overflow:hidden;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel)}
.meta-periodes button{min-width:52px;height:100%;padding:0 10px;border:0;border-left:1px solid var(--lijn);background:var(--paneel);color:var(--gedempt);cursor:pointer}
.meta-periodes button:first-child{border-left:0}
.meta-periodes button.aan{background:var(--blauw);color:#fff}
.meta-grafiek{width:100%;overflow-x:auto}
.meta-grafiek svg{display:block;width:100%;min-width:540px;height:176px}
.meta-filters{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:10px;padding:12px}
.meta-campagnes{display:grid;gap:var(--gap);margin-bottom:0}
.meta-campagne{padding:var(--content-pad);border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel)}
.meta-campagne-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.meta-campagne-kop>span:first-child{min-width:0}
.meta-campagne-kop>span:first-child>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-campagne-kop .hint{margin:2px 0 0}
.meta-campagne-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.meta-campagne-cijfers>span{min-width:0;padding:8px 10px;border:1px solid var(--lijn-licht);border-radius:var(--radius);background:var(--bg)}
.meta-campagne-cijfers>span>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-campagne-cijfers>span>span:first-child,.meta-campagne-voet{color:var(--gedempt)}
.meta-campagne-voet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Agenda: professionele planner binnen de vaste shell ===== */
.ag-paneel{padding:0;overflow:hidden}
.ag-toolbar{display:grid;background:var(--paneel);border-bottom:1px solid var(--lijn)}
.ag-hoofd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);min-height:64px;padding:var(--space-3) var(--content-pad);min-width:0}
.ag-nav,.ag-bediening,.ag-filtergroep{display:flex;align-items:center;gap:var(--control-gap);min-width:0}
.ag-hoofd>.knop,.ag-toolbar .knop,.ag-toolbar .stil{width:auto;margin:0}
.ag-toolbar button:focus-visible,.ag-kop:focus-visible,.ag-mdag:focus-visible,.ag-lijst-rij:focus-visible,.ag-taken-meer:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.ag-periode{min-width:0;color:var(--tekst);text-align:left;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-bediening{justify-content:space-between;min-height:56px;padding:var(--space-2) var(--content-pad);border-top:1px solid var(--lijn-licht);background:var(--bg)}
.ag-nav{flex:none}
.ag-switch,.ag-vennoten{display:inline-flex;align-items:center;height:var(--btn-h);overflow:hidden;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel)}
.ag-switch button,.ag-vennoten button{height:100%;padding:0 10px;border:0;border-left:1px solid var(--lijn);background:var(--paneel);color:var(--gedempt);cursor:pointer}
.ag-switch button:first-child,.ag-vennoten button:first-child{border-left:0}
.ag-switch button{min-width:62px;color:var(--sub)}
.ag-switch button:hover,.ag-vennoten button:hover{background:var(--blauw-bg);color:var(--blauw)}
.ag-switch button.aan,.ag-switch button.aan:hover{background:var(--blauw);color:#fff}
.ag-vennoten button{display:inline-flex;align-items:center;gap:7px;opacity:.52}
.ag-vennoten button span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-vennoten button.aan{background:var(--paneel);color:var(--tekst);opacity:1;box-shadow:inset 0 -2px 0 #2563eb}
.ag-vennoten button.aan:nth-child(2){box-shadow:inset 0 -2px 0 #7c3aed}
.ag-persoon-stip,.ag-stip{width:9px;height:9px;flex:none;border-radius:var(--radius);background:#2563eb}
.ag-persoon-stip.p1{background:#7c3aed}
.ag-filtergroep{justify-content:flex-end}
.ag-zoek{width:170px;height:var(--btn-h);padding:0 12px;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel)}

/* Taakaanvragen hebben geen plandatum en staan daarom in een compacte inbox,
   wel binnen dezelfde planner maar nooit misleidend tussen tijdsafspraken. */
.ag-taken{padding:var(--space-3) var(--content-pad);border-bottom:1px solid var(--lijn);background:var(--zacht)}
.ag-taken-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;color:var(--sub)}
.ag-taken-kop>span{display:flex;align-items:center;gap:8px;min-width:0}
.ag-taken-kop>span>span:last-child{color:var(--gedempt);white-space:nowrap}
.ag-taken-kop .stil{width:auto;margin:0}
.ag-taken-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.ag-taak{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:var(--space-2);min-width:0;min-height:80px;padding:var(--space-2) var(--space-3);border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel)}
.ag-taak.actie{border-color:var(--blauw);background:var(--blauw-bg)}
.ag-taak-tekst{display:block;min-width:0}
.ag-taak-tekst>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-taak-tekst>span:last-child,.ag-taken-leeg{color:var(--gedempt)}
.ag-taak-status{align-self:flex-start;color:var(--blauw);white-space:nowrap}
.ag-taak-status.goedgekeurd{color:var(--groen)}
.ag-taak-status.revisie{color:var(--rood)}
.ag-taak-acties{display:flex;gap:var(--control-gap);justify-content:flex-end}
.ag-taak-acties .ikoon-knop{width:30px;height:30px}
.ag-taak>.stil{width:100%;min-height:30px;margin:0}
.ag-taken-meer{min-height:80px;border:1px dashed var(--lijn);border-radius:var(--radius);background:var(--paneel);color:var(--gedempt);cursor:pointer}
.ag-taken-meer:hover{border-color:var(--blauw);color:var(--blauw);background:var(--blauw-bg)}

.ag-cal{overflow:hidden;background:var(--paneel)}
.ag-scroll{height:min(64vh,620px);min-height:480px;overflow:auto;scrollbar-gutter:stable}
.ag-cal.ag-week .ag-head,.ag-cal.ag-week .ag-body{min-width:0}
.ag-head{position:sticky;top:0;z-index:4;background:var(--paneel);border-bottom:1px solid var(--lijn);box-shadow:0 1px 0 rgba(15,23,42,.03)}
.ag-hd-rij{display:flex}
.ag-head-gutter{width:56px;flex:none;border-right:1px solid var(--lijn-licht)}
.ag-head-dagen{flex:1;display:grid}
.ag-kop{padding:9px 4px;text-align:center;border-right:1px solid var(--lijn-licht);cursor:pointer;transition:background .15s}
.ag-kop:hover{background:var(--blauw-bg)}
.ag-kop:last-child{border-right:0}
.ag-kop-wd{display:block;color:var(--gedempt);text-transform:uppercase;letter-spacing:.04em}
.ag-kop-nr{display:inline-grid;place-items:center;width:30px;height:30px;margin-top:2px;border-radius:var(--radius)}
.ag-kop.vandaag{color:var(--blauw);background:var(--zacht)}
.ag-kop.vandaag .ag-kop-nr{background:var(--blauw);color:#fff}
.ag-kop.weekend,.ag-dagkolom.weekend{background-color:var(--zacht)}
.ag-body{display:flex;position:relative}
.ag-gutter{width:56px;flex:none;border-right:1px solid var(--lijn-licht);background:var(--paneel)}
.ag-uur{position:relative}
.ag-uur span{position:absolute;top:-1px;right:8px;color:var(--gedempt)}
.ag-dagen{flex:1;display:grid}
.ag-dagkolom{position:relative;border-right:1px solid var(--lijn-licht);cursor:pointer;background-color:var(--paneel);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 25px,var(--zacht) 25px,var(--zacht) 26px,transparent 26px,transparent 51px,var(--lijn-licht) 51px,var(--lijn-licht) 52px)}
.ag-dagkolom.vandaag{background-color:var(--zacht)}
.ag-dagkolom:last-child{border-right:0}
.ag-event{position:absolute;overflow:hidden;padding:5px 7px;border:0;border-left:3px solid var(--blauw);border-radius:var(--radius);cursor:grab;user-select:none;touch-action:none;box-shadow:inset 0 0 0 1px rgba(15,23,42,.07);transition:box-shadow .15s,filter .15s}
.ag-event:hover{z-index:2;filter:saturate(1.08);box-shadow:inset 0 0 0 1px rgba(15,23,42,.13),0 5px 14px rgba(15,23,42,.1)}
.ag-event.sleept{z-index:5;opacity:.92;cursor:grabbing;box-shadow:0 8px 20px rgba(15,23,42,.22)}
.ag-event.compact{display:flex;align-items:center;padding-top:0;padding-bottom:0}
.ag-resize{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.ag-ev-compact,.ag-ev-titel,.ag-ev-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-event,.ag-event *{line-height:1.15}
.ag-ev-titel,.ag-ev-compact{color:var(--tekst)}
.ag-ev-tijd{display:flex;align-items:center;gap:4px;color:var(--gedempt)}
.ag-ev-tijd svg{width:12px;height:12px;opacity:.7}
.ag-ev-meta{color:var(--gedempt)}
.ag-nu{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--rood);z-index:3}
.ag-nu::before{content:'';position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:var(--radius);background:var(--rood)}

.ag-maand{overflow:auto;background:var(--paneel)}
.ag-mkop{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--lijn)}
.ag-mkop>div{padding:8px;text-align:center;color:var(--gedempt);text-transform:uppercase;border-right:1px solid var(--lijn-licht)}
.ag-mkop>div:last-child{border-right:0}
.ag-mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ag-mdag{border-right:1px solid var(--lijn-licht);border-bottom:1px solid var(--lijn-licht);padding:8px;display:flex;flex-direction:column;gap:5px;cursor:pointer;min-width:0;transition:background .15s}
.ag-mdag:hover{background:var(--blauw-bg)}
.ag-mdag:nth-child(7n){border-right:0}
.ag-mdag.buiten{background:var(--zacht)}
.ag-mdag.buiten .ag-mnr{color:var(--gedempt)}
.ag-mnr{align-self:flex-start;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:var(--radius)}
.ag-mdag.vandaag .ag-mnr{background:var(--blauw);color:#fff}
.ag-mchips{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.ag-chip{display:flex;align-items:center;gap:6px;min-height:28px;padding:2px 6px;border:1px solid rgba(15,23,42,.05);border-radius:var(--radius);cursor:pointer;overflow:hidden}
.ag-chip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-meer{color:var(--gedempt);padding:0 4px;cursor:pointer}
.modal-body textarea{width:100%;border:1px solid var(--lijn);border-radius:var(--radius);padding:10px 12px;font:inherit;background:var(--paneel);color:inherit;resize:vertical}
.ag-gekoppelde-taak{margin-bottom:14px;padding:9px 10px;border:1px solid var(--blauw);border-radius:var(--radius);background:var(--blauw-bg);color:var(--blauw)}
.ag-herhaalvelden{margin-top:12px}
.ag-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.ag-check input{width:auto;margin:0}
/* hele-dag-rij */
.ag-alldag{display:flex;border-top:1px solid var(--lijn-licht)}
.ag-alldag-gutter{width:56px;flex:none;display:flex;align-items:center;justify-content:flex-end;padding:0 8px;color:var(--gedempt);border-right:1px solid var(--lijn-licht)}
.ag-alldag-dagen{flex:1;display:grid}
.ag-alldag-cel{border-right:1px solid var(--lijn-licht);padding:4px;display:flex;flex-direction:column;gap:3px;min-height:28px}
.ag-alldag-cel:last-child{border-right:0}
.ag-alldag-cel.weekend{background-color:var(--zacht)}
.ag-alldag-bar{display:flex;align-items:center;gap:5px;border:1px solid rgba(15,23,42,.06);border-left:3px solid var(--blauw);border-radius:var(--radius);padding:2px 7px;cursor:pointer;overflow:hidden}
.ag-alldag-bar svg{width:12px;height:12px;opacity:.7;flex:none}
/* lijst / agenda */
.ag-lijst{display:flex;flex-direction:column;padding:0 16px 16px}
.ag-lijst-kop{padding:14px 2px 6px;color:var(--gedempt);text-transform:capitalize}
.ag-lijst-kop.vandaag{color:var(--blauw)}
.ag-lijst-rij{display:flex;align-items:center;gap:var(--space-3);min-height:var(--row-h);margin-bottom:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--lijn-licht);border-radius:var(--radius);cursor:pointer}
.ag-lijst-rij:hover{background:var(--bg);border-color:var(--lijn)}
.ag-lijst-tijd{color:var(--gedempt);min-width:100px}
.ag-lijst-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-lijst-loc{max-width:180px;color:var(--gedempt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-lijst-badges{display:inline-flex;gap:6px}
.ag-lijst-badges svg{width:14px;height:14px;opacity:.65}

@media(max-width:640px){
  .meta-melding{grid-template-columns:auto minmax(0,1fr)}
  .meta-melding>.stil{grid-column:1/-1;width:100%}
  .meta-account{align-items:flex-start}
  .meta-account>.stil{width:var(--btn-h)}
  .meta-account>.stil .lbl{display:none}
  .meta-campagne-cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mollie-command-kop{align-items:flex-start;padding:12px}
  .mollie-command-acties>.pill{display:none}
  .mollie-saldo-keuze{max-width:150px}
  .mollie-command .stil{width:var(--btn-h);padding:0}
  .mollie-command .stil .lbl{display:none}
  .mollie-hoofdnav button{flex:none;min-width:122px}
  .mollie-regel{grid-template-columns:minmax(0,1fr) auto}
  .mollie-regel-rechts{justify-content:flex-end}
  .mollie-fout{grid-template-columns:auto minmax(0,1fr)}
  .mollie-fout-acties{grid-column:1/-1}
  .mollie-fout-acties>.stil{flex:1}
  .mollie-rapport-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mollie-rapport-bediening{align-items:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mollie-rapport-bediening>.stil{grid-column:1/-1;width:100%}
  .ag-paneel{padding:0}
  .ag-hoofd{grid-template-columns:minmax(0,1fr) auto;padding:12px}
  .ag-hoofd>.ag-nav{grid-column:1/-1;grid-row:2;justify-content:center}
  .ag-periode{grid-column:1;grid-row:1}
  .ag-hoofd>.knop{width:var(--btn-h)}
  .ag-hoofd>.knop .lbl{display:none}
  .ag-bediening{display:grid;grid-template-columns:1fr;gap:8px;padding:10px 12px}
  .ag-filtergroep{display:grid;grid-template-columns:1fr;width:100%}
  .ag-vennoten,.ag-zoek{width:100%}
  .ag-vennoten button{flex:1;justify-content:center;min-width:0}
  .ag-switch{width:100%}
  .ag-switch button{flex:1;min-width:0}
  .ag-zoek{width:100%}
  .ag-taken{padding:10px 12px 12px}
  .ag-taken-lijst{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:2px}
  .ag-taak,.ag-taken-meer{min-width:230px;scroll-snap-align:start}
  .ag-cal.ag-week .ag-head,.ag-cal.ag-week .ag-body{min-width:760px}
  .ag-maand>.ag-mkop,.ag-maand>.ag-mgrid{min-width:620px}
  .ag-scroll{min-height:420px}
  .ag-lijst-rij{align-items:flex-start;flex-wrap:wrap}
  .ag-lijst-tijd{min-width:92px}
  .ag-lijst-titel{flex-basis:calc(100% - 120px)}
  .ag-lijst-loc{max-width:100%;margin-left:19px}
}
@media(max-width:480px){
  .koppel-aanvraag-acties{align-items:stretch;flex-direction:column}
  .koppel-aanvraag-acties>.knop,.koppel-aanvraag-acties>.stil{width:100%}
  .meta-bediening{align-items:stretch;flex-direction:column}
  .meta-bediening>.hint{text-align:left}
  .meta-periodes{width:100%}
  .meta-periodes button{flex:1;min-width:0}
  .meta-filters{grid-template-columns:1fr}
  .mollie-command-kop{display:grid;grid-template-columns:1fr}
  .mollie-command-acties{align-items:center;flex-direction:row;width:100%}
  .mollie-saldo-keuze{max-width:none;min-width:0;flex:1}
  .mollie-onboarding{grid-template-columns:auto minmax(0,1fr)}
  .mollie-onboarding>.stil{grid-column:1/-1;width:100%}
  .mollie-rapport-kpis{grid-template-columns:1fr}
  .mollie-paneel-kop>.stil{width:var(--btn-h);padding:0}
  .mollie-paneel-kop>.stil .lbl{display:none}
  .ag-nav>.stil{width:var(--btn-h)}
  .ag-nav>.stil .lbl{display:none}
  .ag-taken-kop>span>span:last-child{display:none}
  .ag-taken-kop .stil{width:var(--btn-h)}
  .ag-taken-kop .stil .lbl{display:none}
}

/* ===== Applicatieshell zonder zijbalk ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{min-height:100vh;background:var(--bg)}
.app-shell.hide{display:none}
.app-bar,.workspace-home{width:calc(100% - var(--content-pad) - var(--content-pad));max-width:calc(var(--content-max) - var(--content-pad) - var(--content-pad));margin:0 auto}
.app-bar{position:sticky;top:0;z-index:20;height:var(--shell-h);border-bottom:1px solid var(--lijn);background:var(--bar-bg);backdrop-filter:blur(10px)}
.app-bar-inner{display:grid;grid-template-columns:160px minmax(0,1fr) 160px;align-items:center;width:100%;max-width:var(--content-max);height:100%;margin:0 auto;padding:0}
.bar-icon{display:grid;place-items:center;width:var(--control-h);height:var(--control-h);padding:0;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);color:var(--sub);cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}
.bar-icon:hover,.header-search:hover{border-color:var(--blauw);background:var(--blauw-bg);color:var(--blauw)}
.bar-icon:hover{transform:translateY(-1px)}
#notifications-nav{position:relative}
#notifications-nav.has-notifications::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border:1px solid var(--paneel);border-radius:50%;background:var(--blauw)}
.page-back.is-hidden{visibility:hidden;pointer-events:none}
.page-context{display:flex;align-items:center;justify-content:center;min-width:0}
.header-search{display:flex;align-items:center;gap:var(--space-2);width:min(100%,440px);height:var(--control-h);padding:0 var(--space-3);border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);color:var(--gedempt);text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease}
.bar-icon:focus-visible,.header-search:focus-visible,.workspace-tile:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.header-search>span{flex:1}
.header-search kbd{padding:1px 6px;border:1px solid var(--lijn);border-radius:4px;background:var(--bg);color:var(--gedempt);font:inherit}
.app-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--control-gap);width:160px}
.app-content{width:100%;min-height:calc(100vh - var(--shell-h));padding:0;outline:0}
.module-houder,.account-layout,.task-request-layout{width:100%;max-width:var(--content-max);min-height:calc(100vh - var(--shell-h));margin:0 auto;padding:var(--content-pad)}
.module-houder{display:grid;gap:var(--gap);align-content:center}
.module-houder>.paneel,.module-houder>.kpi-rij,.module-houder>.kop-rij,.module-houder>.mollie-hoofdnav,.module-houder>.mollie-subnav,.module-houder>.msg{margin-top:0;margin-bottom:0}

/* Overzicht: grote moduleknoppen binnen één exact 20px-raster. */
.workspace-home{min-height:calc(100vh - var(--shell-h));background:var(--bg)}
.home-page{position:relative;padding:0}
.home-welcome{position:absolute;inset:0 0 auto;z-index:1;display:flex;align-items:center;justify-content:center;min-height:var(--control-h);color:var(--tekst);font-weight:650;text-align:center;pointer-events:none}
.home-tile-grid{min-height:calc(100vh - var(--shell-h));padding:0}
.workspace-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:var(--tile-h);align-content:center;justify-content:center;gap:var(--tile-gap);padding:0}
.workspace-tile{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);height:var(--tile-h);min-width:0;padding:0 var(--content-pad);border:1px solid var(--tegel-lijn);border-radius:var(--radius);background:var(--paneel);color:var(--tekst);text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.workspace-tile:hover{transform:translateY(-2px);border-color:var(--blauw);background:var(--blauw-bg);color:var(--blauw);box-shadow:0 6px 18px rgba(38,109,240,.14)}
.workspace-tile:active{transform:translateY(0)}
.workspace-tile-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius);background:var(--blauw-bg);color:var(--blauw)}
.workspace-tile-copy{display:block;min-width:0}
.workspace-tile-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-tile-copy strong{font-weight:650}
.workspace-status{justify-self:start}
.workspace-status.attention{color:var(--blauw)}
.empty-workspace{display:flex;align-items:center;justify-content:center;gap:var(--space-3);color:var(--gedempt);text-align:center}

/* Globale navigator */
.command-dialog{width:min(560px,calc(100% - 32px));max-height:min(624px,calc(100vh - 48px));margin:9vh auto 0;padding:0;overflow:hidden;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);color:var(--tekst);box-shadow:0 24px 72px rgba(20,20,24,.22)}
.command-dialog::backdrop{background:rgba(24,24,28,.42);backdrop-filter:blur(2px)}
.command-head{display:flex;align-items:center;gap:var(--space-2);height:56px;padding:0 var(--space-3);border-bottom:1px solid var(--lijn)}
.command-head>svg{color:var(--gedempt);flex:none}
.command-head input{min-width:0;height:52px;padding:0;border:0;outline:0;background:transparent}
.command-close{padding:3px 6px;border:1px solid var(--lijn);border-radius:4px;background:var(--zacht);color:var(--gedempt);cursor:pointer}
.command-results{max-height:480px;padding:var(--space-2);overflow-y:auto}
.command-result{display:flex;align-items:center;gap:var(--space-3);width:100%;height:52px;padding:0 var(--space-2);border:0;border-radius:var(--radius);background:var(--paneel);color:var(--tekst);text-align:left;cursor:pointer}
.command-result:hover,.command-result:focus{outline:0;background:var(--selectie)}
.command-result>svg{margin-left:auto;color:var(--gedempt)}
.command-result-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid var(--lijn);border-radius:6px;background:var(--paneel);color:var(--sub)}
.command-result-copy{display:block;min-width:0;flex:1}
.command-result-copy>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.command-empty{padding:28px;text-align:center;color:var(--gedempt)}

/* Bestaande modules binnen dezelfde rustige werkruimte. */
.app-content .paneel{box-shadow:none;border-radius:var(--radius)}
.app-content .kop-rij>b,.app-content .kop-rij>strong{letter-spacing:-.005em}
.app-content table th{height:40px;color:var(--gedempt);font-weight:600;letter-spacing:.015em;text-transform:none}
.app-content table td{height:48px}
.app-content .leeg-blok{background:var(--zacht);border-style:solid}
.account-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tile-gap);align-content:center;align-items:start}
.account-layout>.paneel{margin:0}
.task-request-layout{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:var(--gap);align-content:center;align-items:start}
.task-request-layout>.paneel{margin:0}

@media(max-width:1040px){
  .task-request-layout{grid-template-columns:1fr}
  .account-layout,.workspace-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .postnl-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  :root{--content-pad:12px;--tile-h:80px}
  .app-bar-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);padding:0}
  .page-context{display:flex}
  .header-search kbd{display:none}
  .app-actions{width:auto}
  .module-houder,.account-layout,.task-request-layout{padding:var(--content-pad)}
  .account-layout{grid-template-columns:1fr;gap:var(--tile-gap);padding:var(--content-pad)}
  .workspace-tile-grid{grid-template-columns:1fr;gap:var(--tile-gap);padding:0}
  .home-page{display:grid;grid-template-rows:auto minmax(0,1fr)}
  .home-welcome{position:static}
  .home-tile-grid{min-height:0}
  .workspace-tile{grid-template-columns:40px minmax(0,1fr) auto;height:var(--tile-h);padding:0 var(--content-pad)}
  .postnl-status{grid-template-columns:40px minmax(0,1fr)}
  .postnl-status>.pill{grid-column:1/-1;width:100%}
  .postnl-form-grid,.postnl-checkout-grid{grid-template-columns:1fr}
  .postnl-inline{grid-template-columns:1fr}
  .postnl-inline>.knop{width:100%}
  .paneel{padding:var(--content-pad)}
  .account-card{padding:0 var(--content-pad)}
  .mollie-command,.ag-paneel{padding:0}
}