:root{
  --blue:#3cbff0;
  --gradient:linear-gradient(135deg,#3cbff0 0%,#0e90c8 100%);--blue-light:#eef3ff;--black:#111111;--dark:#1e1e2e;
  --white:#ffffff;--off:#f8f7f4;--muted:#5e5d5a;--border:#e8e6e0;
  --success:#1a7a3c;--success-bg:#eaf5ee;
  --warning:#7a4a00;--warning-bg:#fff4e0;
  --danger:#b01a1a;--danger-bg:#fff0f0;
  --r:12px;--rsm:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Montserrat',sans-serif;background:var(--off);color:var(--black);font-size:14px;line-height:1.6;}
button,input,select,textarea{font-family:'Montserrat',sans-serif;}
.screen{display:none;width:100%;height:100%;}
.screen.active{display:flex;}

/* LOGIN */
#s-login{align-items:center;justify-content:center;background:var(--off);flex-direction:column;}
.login-box{width:100%;max-width:420px;padding:2rem;}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.lmark{width:36px;height:36px;background:var(--black);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.lmark span{color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;}
.lname{font-size:15px;font-weight:700;}
.login-title{font-size:30px;font-weight:700;line-height:1.2;margin-bottom:6px;}
.login-title span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic;}
.login-sub{font-size:13px;color:var(--muted);margin-bottom:2rem;}
.mode-bar{display:flex;background:#f2f1ee;border-radius:var(--rsm);padding:4px;margin-bottom:1.75rem;}
.mbtn{flex:1;padding:8px;font-size:12px;font-weight:700;border:none;background:none;border-radius:6px;cursor:pointer;color:var(--muted);transition:all .2s;letter-spacing:.03em;}
.mbtn.active{background:var(--white);color:var(--black);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.field{margin-bottom:1rem;}
.field label{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.06em;text-transform:uppercase;}
.field input,.field select{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:13px;background:var(--white);color:var(--black);outline:none;transition:border-color .15s;}
.field input:focus,.field select:focus{border-color:var(--blue);}
.btn-main{width:100%;padding:13px;background:var(--gradient);color:#fff;border:none;border-radius:var(--rsm);font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.04em;transition:opacity .15s;margin-top:4px;}
.btn-main:hover{opacity:.88;}
.l-err{font-size:12px;color:var(--danger);margin-top:10px;display:none;font-weight:500;}
.l-hint{font-size:11px;color:var(--muted);margin-top:1.25rem;text-align:center;}

/* ADMIN SHELL */
#s-admin{flex-direction:row;overflow:hidden;width:100%;height:100%;}
#s-admin.active{display:flex!important;}
.sidebar{width:250px;min-width:250px;height:100vh;background:var(--dark);display:flex;flex-direction:column;padding:1.5rem 0;overflow-y:auto;overflow-x:hidden;flex-shrink:0;scrollbar-width:none;}.sidebar::-webkit-scrollbar{display:none;}
.sb-logo{display:flex;align-items:center;gap:10px;padding:0 1.25rem 1.75rem;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:1.5rem;}
.sb-lmark{width:30px;height:30px;background:var(--blue);border-radius:7px;display:flex;align-items:center;justify-content:center;}
.sb-lmark span{color:#fff;font-size:10px;font-weight:700;}
.sb-lname{font-size:13px;font-weight:700;color:#fff;}
.sb-ltag{font-size:10px;color:rgba(255,255,255,.3);margin-left:auto;}
.sb-sec{padding:0 .875rem;margin-bottom:1.25rem;}
.sb-lbl{font-size:10px;color:rgba(255,255,255,.28);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:0 .375rem;margin-bottom:4px;}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:12px;font-weight:600;color:rgba(255,255,255,.45);transition:background .15s,color .15s;margin-bottom:1px;letter-spacing:.02em;outline:none;}
.sb-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);}
.sb-item:focus{outline:none;background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);}
.sb-item.active{background:rgba(60,191,240,.2);color:#fff;}
.sb-item.active:hover{background:rgba(60,191,240,.28);color:#fff;}
.sb-item.active:focus{background:rgba(60,191,240,.2);color:#fff;outline:none;}
.sb-item svg{opacity:.5;flex-shrink:0;width:16px;height:16px;}
.sb-item.active svg{opacity:1;}
.sb-badge{margin-left:auto;font-size:10px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.6);padding:2px 7px;border-radius:20px;font-weight:700;}
.sb-badge.blue{background:rgba(26,92,255,.35);color:#7fa8ff;}
.sb-badge.orange{background:rgba(255,140,0,.25);color:#ffb347;}
.sb-bottom{margin-top:auto;padding:0 .875rem;}
.sb-user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.1);}
.sb-av{width:30px;height:30px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.sb-uname{font-size:12px;color:rgba(255,255,255,.75);font-weight:700;}
.sb-urole{font-size:10px;color:rgba(255,255,255,.3);}
.sb-out{margin-left:auto;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.25);padding:4px;transition:color .15s;}
.sb-out:hover{color:rgba(255,255,255,.7);}

/* MAIN */
.admin-main{flex:1;min-width:0;display:grid;grid-template-rows:auto 1fr;height:100vh;overflow:hidden;position:relative;}
.topbar-big{background:var(--white);border-bottom:1px solid var(--border);padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between;}
.topbar-big h1{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;}
.topbar-big p{font-size:12px;color:var(--muted);margin-top:3px;}
.topbar-right{display:flex;gap:8px;align-items:center;}
.apage{display:none;overflow-y:scroll;padding:1.5rem 2rem 3rem;flex-direction:column;gap:1.25rem;min-width:0;width:100%;box-sizing:border-box;}
.apage.active{display:flex;}
/* Scrollbar altijd aan de rechterkant, smal en subtiel */
.apage::-webkit-scrollbar{width:5px;}
.apage::-webkit-scrollbar-track{background:transparent;}
.apage::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.apage::-webkit-scrollbar-thumb:hover{background:#ccc;}
.portal-body::-webkit-scrollbar{width:5px;}
.portal-body::-webkit-scrollbar-track{background:transparent;}
.portal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.portal-body::-webkit-scrollbar-thumb:hover{background:#ccc;}

/* DASHBOARD GRID */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.dash-widget{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;position:relative;transition:box-shadow .15s;}
.dash-widget.col-12{grid-column:span 2;}
.dash-widget.col-8{grid-column:span 2;}
.dash-widget.col-6{grid-column:span 1;}
.dash-widget.col-4{grid-column:span 1;}
.dash-widget.col-3{grid-column:span 1;}
.dash-widget.dragging{opacity:.55;box-shadow:0 8px 32px rgba(0,0,0,.18);}
.dash-widget.drag-over{border-color:var(--blue);box-shadow:0 0 0 2px rgba(60,191,240,.3);}
.dash-widget-inner{padding:1.25rem 1.5rem;}
.dash-drag-handle{cursor:grab;color:var(--muted);font-size:12px;padding:2px 4px;opacity:0;transition:opacity .15s;display:inline-block;}
.dash-widget:hover .dash-drag-handle{opacity:1;}
.dash-widget-hidden{display:none!important;}
/* DOCUMENT EDITOR */
.doc-editor-wrap{background:var(--white);}
.doc-toolbar{display:flex;gap:2px;padding:8px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;background:var(--off);}
.doc-tb-btn{padding:4px 8px;background:none;border:none;border-radius:5px;cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);transition:all .15s;line-height:1.4;font-family:'Montserrat',sans-serif;}
.doc-tb-btn:hover{background:var(--border);color:var(--black);}
.doc-tb-sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0;}
.doc-content{min-height:420px;max-height:70vh;overflow-y:auto;padding:1.75rem 2.5rem;outline:none;font-size:14px;line-height:1.8;}
.doc-content:focus{outline:none;}
.doc-content h1{font-size:26px;font-weight:700;margin-bottom:.75rem;letter-spacing:-.02em;line-height:1.2;}
.doc-content h2{font-size:19px;font-weight:700;margin-bottom:.5rem;margin-top:1.5rem;letter-spacing:-.01em;}
.doc-content h3{font-size:15px;font-weight:700;margin-bottom:.4rem;margin-top:1rem;}
.doc-content p{margin-bottom:.75rem;}
.doc-content ul,.doc-content ol{padding-left:1.5rem;margin-bottom:.75rem;}
.doc-content li{margin-bottom:.25rem;}
.doc-content table{width:100%;border-collapse:collapse;margin:1rem 0;}
.doc-content table td,.doc-content table th{border:1px solid var(--border);padding:8px 12px;font-size:13px;min-width:60px;}
.doc-content table th{background:var(--off);font-weight:700;}
.doc-content img{max-width:100%;border-radius:var(--rsm);margin:.5rem 0;display:block;}
.doc-content blockquote{border-left:3px solid var(--blue);padding:.5rem 1rem;color:var(--muted);margin:.75rem 0;font-style:italic;background:rgba(60,191,240,.06);border-radius:0 var(--rsm) var(--rsm) 0;}
.doc-title-inp{width:100%;border:none;border-bottom:2px solid var(--border);outline:none;font-size:20px;font-weight:700;font-family:'Montserrat',sans-serif;background:transparent;color:var(--black);padding:4px 0 8px;margin-bottom:12px;transition:border-color .15s;}
.doc-title-inp:focus{border-bottom-color:var(--blue);}
.doc-list-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;}
.doc-list-item:last-child{border-bottom:none;}
.doc-list-item:hover{background:var(--off);}
/* NOTES TAB */
#ap-documenten.editing{padding:0!important;gap:0!important;overflow:hidden!important;}
/* Doc-editor overlay neemt grid-row 2, topbar blijft in grid-row 1 */
.doc-editor-overlay{grid-row:2;display:flex;flex-direction:column;background:var(--off);overflow:hidden;}
@media(max-width:640px){
  /* Op mobiel: editor scrollbaar, topbar (met hamburger) blijft boven */
  .doc-editor-overlay{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .doc-content{padding:24px 16px;min-height:400px;}
}
/* Doc editor fills full admin-main content area */
.doc-editor-overlay{grid-row:2;display:flex;flex-direction:column;background:var(--off);overflow:hidden;}
.note-item{background:var(--off);border:1px solid var(--border);border-radius:var(--rsm);padding:12px 14px;margin-bottom:8px;position:relative;}
.note-item.pinned{background:var(--warning-bg);border-color:rgba(122,74,0,.2);}
.note-item-meta{font-size:10px;color:var(--muted);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.note-item-text{font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
/* CARDS */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem 1.5rem;}
.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;}
.card-title{font-size:13px;font-weight:700;letter-spacing:-.01em;}

/* METRICS */
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.mgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.mcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.25rem;}
.mcard-lbl{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.mcard-val{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.mcard-delta{font-size:11px;margin-top:5px;font-weight:600;}
.dup{color:var(--success);}.dwarn{color:var(--warning);}

/* BUTTONS */
.btn-blue{padding:8px 16px;background:var(--gradient);color:#fff;border:none;border-radius:var(--rsm);font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.03em;transition:opacity .15s;}
.btn-blue:hover{opacity:.88;}
.btn-ghost{padding:8px 14px;background:none;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:12px;font-weight:600;cursor:pointer;color:var(--black);transition:border-color .15s;}
.btn-ghost:hover{border-color:#aaa;}
.btn-smb{padding:5px 10px;background:none;border:none;font-size:11px;font-weight:700;color:var(--blue);cursor:pointer;border-radius:6px;transition:all .15s;}
.btn-smb:hover{background:var(--blue-light);}
.btn-smr{padding:5px 10px;background:none;border:none;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;border-radius:6px;transition:all .15s;}
.btn-smr:hover{background:var(--danger-bg);color:var(--danger);}
.btn-back{display:flex;align-items:center;gap:6px;background:none;border:none;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;padding:0;margin-bottom:.25rem;transition:color .15s;}
.btn-back:hover{color:var(--black);}

/* TABLE */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{text-align:left;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;padding:14px 14px 10px;border-bottom:1px solid var(--border);}
.tbl th.stat-sort-th:hover,.tbl th[onclick]:hover{color:var(--blue);background:var(--off);}
.sth-arrow{color:var(--blue);font-size:9px;margin-left:2px;}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover td{background:var(--off);}

/* PILLS */
.pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;letter-spacing:.03em;display:inline-block;}
.p-active{background:var(--success-bg);color:var(--success);}
.p-review{background:var(--warning-bg);color:var(--warning);}
.p-pending{background:#f2f1ee;color:var(--muted);}
.p-approved{background:var(--success-bg);color:var(--success);}
.p-changes{background:var(--danger-bg);color:var(--danger);}
.p-new{background:rgba(60,191,240,.12);color:var(--blue);}
.p-awaiting{background:var(--warning-bg);color:var(--warning);}
.p-link{background:#f2f1ee;color:var(--muted);}

/* PROGRESS */
.prog{display:inline-flex;align-items:center;gap:8px;}
.prog-track{width:72px;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.prog-fill{height:100%;background:var(--gradient);border-radius:3px;}
.prog-pct{font-size:11px;color:var(--muted);font-weight:600;}

/* TOGGLE */
.toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:20px;cursor:pointer;transition:background .2s;}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;}
.toggle input:checked+.toggle-slider{background:var(--gradient);}
.toggle input:checked+.toggle-slider:before{transform:translateX(16px);}
.widget-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.widget-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--rsm);transition:border-color .15s;}
.widget-item.on{border-color:var(--blue);background:rgba(60,191,240,.08);}
.stat-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);}
.stat-toggle-row:last-child{border-bottom:none;}
.section-div{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding:4px 0 8px;border-bottom:1px solid var(--border);margin-bottom:12px;margin-top:4px;}

/* CLIENT GRID */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.client-block{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,box-shadow .2s;}
.client-block:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(26,92,255,.07);}
.cb-btns{display:flex;gap:6px;}
.cb-portal{flex:1;padding:9px;background:var(--gradient);color:#fff;border:none;border-radius:var(--rsm);font-size:11px;font-weight:700;cursor:pointer;transition:opacity .15s;letter-spacing:.02em;}
.cb-portal:hover{opacity:.88;}
.cb-icon{width:34px;height:34px;background:none;border:1.5px solid var(--border);border-radius:var(--rsm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.cb-icon:hover{border-color:var(--blue);background:var(--blue-light);}
.cb-icon svg{width:14px;height:14px;stroke:var(--muted);}
.cb-icon:hover svg{stroke:var(--blue);}

/* TODO */
.phase-section{margin-bottom:1.25rem;}
.phase-header{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding-bottom:6px;border-bottom:1.5px solid var(--border);}
.phase-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.phase-title{font-size:12px;font-weight:700;letter-spacing:.03em;}
.phase-count{font-size:10px;font-weight:700;background:var(--off);color:var(--muted);padding:2px 7px;border-radius:20px;}
.todo-item{display:flex;align-items:flex-start;gap:8px;padding:5px 8px;border-radius:var(--rsm);transition:background .1s;margin-bottom:1px;}
.todo-item:hover{background:var(--off);}
.todo-body{flex:1;min-width:0;}
.todo-text{font-size:12px;font-weight:600;line-height:1.35;}
.todo-text.done{text-decoration:line-through;color:var(--muted);}
.todo-tags{display:flex;gap:4px;margin-top:2px;flex-wrap:wrap;align-items:center;}
.todo-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--off);color:var(--muted);}
.todo-tag.client{background:var(--blue-light);color:var(--blue);}
.assignee-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px 2px 3px;border-radius:20px;background:var(--off);}
.assignee-dot{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;}
.todo-actions{display:flex;gap:4px;flex-shrink:0;align-items:center;}
.phase-sel{padding:4px 8px;border:1px solid var(--border);border-radius:5px;font-size:10px;font-weight:600;cursor:pointer;background:var(--white);outline:none;color:var(--black);}
.todo-del{padding:3px 7px;background:none;border:none;font-size:11px;color:var(--muted);cursor:pointer;border-radius:5px;transition:all .15s;}
.todo-del:hover{background:var(--danger-bg);color:var(--danger);}
.todo-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-top:6px;padding:8px 10px;background:var(--off);border-radius:var(--rsm);border-left:2.5px solid var(--border);display:none;}
.todo-item.expanded .todo-desc{display:block;}
.todo-expand-btn{background:none;border:none;cursor:pointer;padding:2px 5px;color:var(--muted);font-size:10px;border-radius:4px;transition:all .15s;line-height:1;margin-top:1px;}
.todo-expand-btn:hover{background:var(--off);color:var(--black);}
.todo-add-row{display:flex;gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1.5px solid var(--border);flex-wrap:wrap;}
.todo-add-row input,.todo-add-row select{padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:12px;outline:none;transition:border-color .15s;background:var(--white);}
.todo-add-row input:focus,.todo-add-row select:focus{border-color:var(--blue);}
.todo-add-row .t-main{flex:1;min-width:180px;}
.todo-add-row button{padding:8px 16px;background:var(--blue);color:#fff;border:none;border-radius:var(--rsm);font-size:12px;font-weight:700;cursor:pointer;}

/* PW */
.pw-row{display:flex;align-items:center;gap:8px;}
.pw-dots{font-family:monospace;letter-spacing:2px;color:var(--muted);font-size:13px;display:inline-block;min-width:10ch;}
.pw-show{background:none;border:none;font-size:10px;font-weight:700;color:var(--blue);cursor:pointer;padding:2px 7px;border-radius:5px;}
.pw-show:hover{background:var(--blue-light);}

/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;align-items:center;justify-content:center;}
.modal-bg.open{display:flex;}
.modal{background:var(--white);border-radius:var(--r);padding:2rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;}
.modal-title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:1.5rem;}
.mf{margin-bottom:1rem;}
.mf label{display:block;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px;}
.mf input,.mf select,.mf textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:13px;color:var(--black);background:var(--white);outline:none;transition:border-color .15s;}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--blue);}
.mf textarea{resize:vertical;min-height:80px;}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--white);z-index:1;}

/* TOAST */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--dark);color:#fff;padding:11px 18px;border-radius:var(--rsm);font-size:13px;font-weight:600;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;z-index:999;}
.toast.show{opacity:1;transform:translateY(0);}

/* CLIENT DETAIL */
.client-detail-hero{background:var(--dark);border-radius:var(--r);padding:1.5rem 2rem;color:#fff;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.client-detail-hero h2{font-size:20px;font-weight:700;letter-spacing:-.02em;}
.client-detail-hero p{font-size:12px;color:rgba(255,255,255,.5);margin-top:3px;}
.ctabs{display:flex;border-bottom:1px solid var(--border);background:var(--white);border-radius:var(--r) var(--r) 0 0;}
.ctab{padding:12px 20px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:all .15s;}
.ctab:hover{color:var(--black);}
.ctab.active{color:var(--blue);border-bottom-color:var(--blue);}
.ctab-page{display:none;background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);padding:1.5rem;}
.ctab-page.active{display:block;}
.milestone-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.milestone-row:last-child{border-bottom:none;}
.ms-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}

/* CHAT */
.chat-wrap{display:flex;flex-direction:column;height:300px;}
.chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px;}
.chat-msg{display:flex;gap:8px;align-items:flex-end;}
.chat-msg.mine{flex-direction:row-reverse;}
.chat-msg.mine>div:last-child{align-items:flex-end;display:flex;flex-direction:column;}
.chat-bubble{max-width:78%;padding:9px 13px;font-size:12px;line-height:1.5;word-break:break-word;}
.chat-msg:not(.mine) .chat-bubble{background:var(--off);color:var(--black);border-radius:4px 12px 12px 12px;}
.chat-msg.mine .chat-bubble{background:var(--gradient);color:#fff;border-radius:12px 4px 12px 12px;}
.chat-cav{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0;}
.chat-meta{font-size:10px;color:var(--muted);margin-top:2px;}
.chat-msg.mine .chat-meta{text-align:right;}
.chat-input-row{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--border);margin-top:10px;}
.chat-inp{flex:1;padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:12px;outline:none;transition:border-color .15s;}
.chat-inp:focus{border-color:var(--blue);}
.chat-send{padding:9px 16px;background:var(--gradient);color:#fff;border:none;border-radius:var(--rsm);font-size:12px;font-weight:700;cursor:pointer;}

/* CONTACT */
.contact-person{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--rsm);margin-bottom:8px;}
.contact-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.contact-name{font-size:13px;font-weight:700;}
.contact-role{font-size:11px;color:var(--muted);}
.contact-btns{display:flex;gap:6px;margin-left:auto;}
.cta-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;text-decoration:none;}
.cta-btn:hover{background:var(--blue);border-color:var(--blue);}
.cta-btn:hover svg{stroke:#fff;}
.cta-btn svg{width:14px;height:14px;stroke:var(--muted);transition:stroke .15s;}

/* PORTAL */
#s-portal{flex-direction:column;height:100vh;overflow:hidden;background:var(--white);}
@supports(height:100dvh){#s-portal{height:100dvh;}}
@media(max-width:640px){
  #s-portal{height:100vh;height:-webkit-fill-available;}
  @supports(height:100dvh){#s-portal{height:100dvh;}}
}
.portal-nav{background:var(--white);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:58px;flex-shrink:0;}
.p-logo{display:flex;align-items:center;gap:10px;}
.p-lmark{width:28px;height:28px;background:var(--black);border-radius:6px;display:flex;align-items:center;justify-content:center;}
.p-lmark span{color:#fff;font-size:10px;font-weight:700;}
.p-lname{font-size:13px;font-weight:700;}
.p-ctag{font-size:12px;color:var(--muted);font-weight:600;padding-left:12px;border-left:1.5px solid var(--border);margin-left:2px;}
.kb-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--off);border-radius:var(--rsm);padding:3px;}
.kb-tabs::-webkit-scrollbar{display:none;}
.kb-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);transition:background .15s,color .15s;white-space:nowrap;outline:none;}
.kb-tab:hover{color:var(--black);background:rgba(0,0,0,.04);}
.kb-tab:focus{outline:none;}
.kb-tab.active{background:var(--white);color:var(--black);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.kb-tab.active:hover{background:var(--white);color:var(--black);}
.kb-tab.active:focus{background:var(--white);color:var(--black);outline:none;}
.kb-tab svg{opacity:.5;flex-shrink:0;}
.kb-tab.active svg{opacity:1;}
.kb-page{display:none;}
.kb-page.active{display:block;}
.ptabs{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex-shrink:0;}.ptabs::-webkit-scrollbar{display:none;}
.ptab{padding:0 16px;height:58px;display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s;outline:none;}
.ptab:hover{color:var(--black);}
.ptab:focus{outline:none;color:var(--black);}
.ptab.active{color:var(--blue);border-bottom-color:var(--blue);}
.ptab.active:hover{color:var(--blue);}
.ptab.active:focus{color:var(--blue);outline:none;}
.p-out{background:none;border:none;font-size:12px;color:var(--muted);cursor:pointer;font-weight:700;padding:7px 14px;border-radius:var(--rsm);}
.p-out:hover{background:var(--off);color:var(--black);}
/* Portal body: max-width voor alle tabs behalve planning */
.portal-body{flex:1;overflow-y:auto;padding:1.75rem 2rem 3rem;width:100%;display:flex;flex-direction:column;gap:1.25rem;background:var(--white);min-height:0;}
/* Alle ptab-pages behalve planning krijgen max-width centrering */
.ptab-page:not(#pp-planning){max-width:1000px;margin-left:auto;margin-right:auto;width:100%;}
/* Planning tab volledige breedte — zie regels boven bij content kalender CSS */
.ptab-page{display:none;flex-direction:column;gap:1.25rem;width:100%;min-width:0;}
.ptab-page.active{display:flex;}
.p-hero{background:var(--dark);border-radius:var(--r);padding:1.75rem 2rem;color:#fff;display:flex;align-items:center;justify-content:space-between;}
.p-hero h2{font-size:20px;font-weight:700;letter-spacing:-.02em;}
.p-hero h2 span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic;}
.p-hero p{font-size:12px;color:rgba(255,255,255,.5);margin-top:3px;}

/* PORTAL PROJECT CARDS */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.proj-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;cursor:pointer;transition:border-color .2s,box-shadow .2s;}
.proj-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(26,92,255,.08);}
.proj-card-type{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.proj-card-name{font-size:14px;font-weight:700;margin-bottom:4px;}
.proj-card-sub{font-size:11px;color:var(--muted);margin-bottom:14px;}
.proj-card-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:8px;}
.proj-card-fill{height:100%;background:var(--gradient);border-radius:3px;}
.proj-card-foot{display:flex;align-items:center;justify-content:space-between;}
.proj-card-pct{font-size:12px;font-weight:700;color:var(--blue);}
.proj-card-due{font-size:11px;color:var(--muted);}

/* PROJECT DETAIL */
.proj-detail-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--white);border-radius:var(--r) var(--r) 0 0;}
.pdtab{padding:12px 20px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s;outline:none;}
.pdtab:hover{color:var(--black);}
.pdtab:focus{outline:none;color:var(--black);}
.pdtab.active{color:var(--blue);border-bottom-color:var(--blue);}
.pdtab.active:hover{color:var(--blue);}
.pdtab.active:focus{color:var(--blue);outline:none;}
.pdtab-page{display:none;background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);padding:1.5rem;}
.pdtab-page.active{display:block;}

/* STATUS TIMELINE */
.status-timeline{display:flex;align-items:flex-start;margin:1rem 0;}
.st-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;}
.st-step:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--border);z-index:0;}
.st-step.done::after{background:var(--blue);}
.st-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;z-index:1;position:relative;}
.st-step.done .st-dot{background:var(--gradient);border-color:transparent;color:#fff;}
.st-step.current .st-dot{border-color:var(--blue);color:var(--blue);}
.st-label{font-size:10px;font-weight:700;color:var(--muted);margin-top:6px;text-align:center;letter-spacing:.03em;}
.st-step.done .st-label,.st-step.current .st-label{color:var(--blue);}

/* DELIV ROW */
.deliv-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.deliv-row:last-child{border-bottom:none;}
.deliv-row-icon{width:36px;height:28px;background:var(--blue-light);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.deliv-row-info{flex:1;}
.deliv-row-name{font-size:13px;font-weight:700;}
.deliv-row-meta{font-size:11px;color:var(--muted);}
.deliv-row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.btn-approve-sm{padding:6px 14px;background:var(--gradient);color:#fff;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;}
.btn-req-sm{padding:6px 12px;background:none;border:1.5px solid var(--border);border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;color:var(--black);}
.btn-req-sm:hover{border-color:var(--blue);color:var(--blue);}
.approved-note{font-size:12px;font-weight:700;color:var(--success);display:flex;align-items:center;gap:6px;}
.comments-wrap{margin-top:.875rem;border-top:1px solid var(--border);padding-top:.875rem;display:none;flex-direction:column;gap:10px;}
.comment{display:flex;gap:10px;}
.c-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;}
.c-av.agency{background:var(--dark);color:#fff;}
.c-av.client{background:var(--blue-light);color:var(--blue);}
.c-body{flex:1;}
.c-author{font-size:11px;font-weight:700;}
.c-time{font-weight:400;color:var(--muted);margin-left:6px;}
.c-text{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5;}
.c-input-row{display:flex;gap:8px;}
.c-input-row input{flex:1;padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:12px;outline:none;transition:border-color .15s;}
.c-input-row input:focus{border-color:var(--blue);}
.c-input-row button{padding:9px 16px;background:var(--blue);color:#fff;border:none;border-radius:var(--rsm);font-size:12px;font-weight:700;cursor:pointer;}

/* STATS SORT */
.sort-btn{padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--muted);transition:all .15s;}
.sort-btn.active{background:var(--gradient);color:#fff;border-color:var(--blue);}
.sort-dir{padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--black);transition:all .15s;}
.sort-dir:hover{border-color:var(--blue);}
.tc-bar-wrap{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin:0 10px;}
.tc-bar-fill{height:100%;background:var(--blue);border-radius:3px;}

/* SUBTASKS */
.subtask-list{margin-top:8px;padding-left:26px;display:flex;flex-direction:column;gap:4px;}
.subtask-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
.subtask-check{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--border);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.subtask-check:hover{border-color:var(--blue);}
.subtask-check.done{background:var(--blue);border-color:var(--blue);}
.subtask-check.done::after{content:'';width:5px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translateY(-1px);display:block;}
.subtask-text.done{text-decoration:line-through;color:var(--muted);}
.add-subtask-row{display:flex;gap:6px;margin-top:6px;padding-left:26px;}
.add-subtask-row input{flex:1;padding:5px 10px;border:1px solid var(--border);border-radius:5px;font-size:11px;outline:none;}
.add-subtask-row input:focus{border-color:var(--blue);}
.add-subtask-row button{padding:5px 10px;background:var(--blue);color:#fff;border:none;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;}
/* MULTI-ASSIGNEE */
.assignee-checks{display:flex;gap:6px;flex-wrap:wrap;}
.assignee-check-item{display:flex;align-items:center;gap:5px;padding:4px 10px;border:1.5px solid var(--border);border-radius:20px;cursor:pointer;font-size:11px;font-weight:700;color:var(--muted);transition:all .15s;user-select:none;}
.assignee-check-item.selected{color:#fff;border-color:transparent;}
/* BEHEER / INVOICE */
.inv-status-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;}
.inv-betaald{background:var(--success-bg);color:var(--success);}
.inv-openstaand{background:var(--warning-bg);color:var(--warning);}
/* TEAM CARDS */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.team-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;gap:10px;}
.team-card-top{display:flex;align-items:center;gap:10px;}
.team-card-name{font-size:14px;font-weight:700;}
.team-card-role{font-size:11px;color:var(--muted);}
.team-card-btns{display:flex;gap:6px;margin-top:4px;}
/* CLIENT ACCOUNTS TABLE */
.ca-table-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
/* MONTH TABS */
.month-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem;}
.month-tab{padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--muted);transition:all .15s;}
.month-tab.active{background:var(--gradient);color:#fff;border-color:var(--blue);}
/* HERO PORTAL EXTENDED */
.portal-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.phs-item{background:rgba(255,255,255,.07);border-radius:8px;padding:10px 14px;}
.phs-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.phs-val{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1;}
.phs-delta{font-size:10px;font-weight:600;color:rgba(255,255,255,.5);margin-top:3px;}

/* PROJECT FEEDBACK */
.proj-feedback-approved{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--success);background:var(--success-bg);padding:10px 14px;border-radius:var(--rsm);}
.proj-feedback-changes{font-size:12px;color:var(--danger);font-weight:700;background:var(--danger-bg);padding:10px 14px;border-radius:var(--rsm);}
.proj-status-note{font-size:12px;color:rgba(255,255,255,.65);background:rgba(255,255,255,.07);border-radius:var(--rsm);padding:10px 14px;margin-top:10px;line-height:1.55;border-left:3px solid rgba(26,92,255,.5);}
.feedback-textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:12px;resize:vertical;min-height:80px;outline:none;font-family:'Montserrat',sans-serif;transition:border-color .15s;margin-bottom:8px;}
.feedback-textarea:focus{border-color:var(--blue);}
/* DELIVERABLES */
.deliv-type-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
.deliv-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.25rem;display:flex;align-items:center;gap:14px;transition:border-color .15s;}
.deliv-card:hover{border-color:var(--blue);}
.deliv-proj-section{margin-bottom:1.25rem;}
.deliv-proj-header{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;padding-bottom:6px;border-bottom:1.5px solid var(--border);}
/* LINK CARD */
.link-row-card:hover{border-color:var(--blue);}
.link-icon{width:32px;height:32px;background:var(--blue-light);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.link-title{font-size:13px;font-weight:700;flex:1;}
.link-sub{font-size:11px;color:var(--muted);}
.link-open-btn{padding:6px 13px;background:var(--gradient);color:#fff;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;}

/* ═══ BRANDBOOK ════════════════════════════════════════ */
.bb-section{margin-bottom:2rem;}
.bb-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.bb-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.bb-field{margin-bottom:12px;}
.bb-field label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.04em;}
.bb-field input,.bb-field textarea,.bb-field select{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:13px;background:var(--white);transition:border .15s;box-sizing:border-box;font-family:inherit;}
.bb-field input:focus,.bb-field textarea:focus{outline:none;border-color:var(--blue);}
.bb-field textarea{resize:vertical;min-height:72px;line-height:1.6;}
.bb-colors{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px;}
.bb-color-chip{width:36px;height:36px;border-radius:8px;border:2px solid rgba(0,0,0,.08);cursor:pointer;position:relative;flex-shrink:0;transition:transform .1s;display:flex;align-items:center;justify-content:center;}
.bb-color-chip:hover{transform:scale(1.1);}
.bb-color-chip input[type=color]{opacity:0;position:absolute;inset:0;cursor:pointer;width:100%;height:100%;border:none;padding:0;}
.bb-add-color{width:36px;height:36px;border-radius:8px;border:1.5px dashed var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);background:none;transition:all .15s;flex-shrink:0;}
.bb-add-color:hover{border-color:var(--blue);color:var(--blue);}
.bb-font-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.bb-font-row input{flex:1;}
.bb-font-preview{font-size:20px;min-width:60px;text-align:center;padding:4px 8px;background:var(--off);border-radius:var(--rsm);}
.bb-remove{background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;padding:4px;line-height:1;transition:color .15s;}
.bb-remove:hover{color:var(--danger,#dc2626);}
.bb-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--off);border:1px solid var(--border);border-radius:20px;font-size:12px;font-weight:600;margin:3px;}
.bb-tag button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:12px;line-height:1;padding:0;}
.bb-tag-input{display:flex;gap:6px;margin-top:6px;}
.bb-tag-input input{flex:1;padding:6px 10px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:12px;}
.bb-tag-input button{padding:6px 12px;background:var(--blue);color:#fff;border:none;border-radius:var(--rsm);cursor:pointer;font-size:12px;font-weight:700;}
.bb-save-row{position:sticky;bottom:0;background:var(--white);padding:12px 0 4px;border-top:1px solid var(--border);margin-top:1rem;display:flex;gap:8px;align-items:center;}
/* ═══ CONTENT KALENDER ═══ */
.cal-tabs{display:flex;gap:2px;background:#f2f1ee;border-radius:var(--rsm);padding:3px;margin-bottom:1.25rem;width:fit-content;}
.cal-tab{padding:7px 18px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);transition:background .15s,color .15s;border:none;background:none;letter-spacing:.02em;outline:none;}
.cal-tab:hover{background:rgba(0,0,0,.05);color:var(--black);}
.cal-tab:focus{outline:none;}
.cal-tab.active{background:var(--white);color:var(--black);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.cal-tab.active:hover{background:var(--white);color:var(--black);}
.cal-tab.active:focus{background:var(--white);color:var(--black);outline:none;}
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
/* Portal planning tab: neemt volledige breedte van portal-body */
#pp-planning{
  padding:0!important;
  max-width:none!important;
  margin:0!important;
  width:100%!important;
  gap:0!important;
}
/* Koptekst planning heeft eigen padding */
#pp-planning-header{
  padding:1.75rem 2rem .75rem;
  flex-shrink:0;
}
/* Maandkalender neemt resterende breedte */
#pp-planning #p-cal-grid{width:100%;padding:0 2rem 2rem;}
#pp-planning .month-cal-wrap{width:100%;box-sizing:border-box;}
#pp-planning .cal-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));width:100%;}
.cal-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s;position:relative;}
.cal-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(60,191,240,.08);}
.cal-card-platform{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.cal-platform-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.04em;}
.plat-tiktok{background:#f0f0f0;color:#111;}
.plat-instagram{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;}
.plat-linkedin{background:#0077b5;color:#fff;}
.cal-card-time{font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:4px;}
.cal-card-desc{font-size:12px;color:var(--black);line-height:1.55;flex:1;}
.cal-card-link{font-size:11px;color:var(--blue);font-weight:700;text-decoration:none;display:flex;align-items:center;gap:4px;width:fit-content;}
.cal-card-link:hover{text-decoration:underline;}
.cal-card-status{display:flex;align-items:center;gap:6px;margin-top:4px;padding-top:8px;border-top:1px solid var(--border);}
.cal-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cal-status-label{font-size:10px;font-weight:700;letter-spacing:.04em;}
.cal-card-actions{position:absolute;top:10px;right:10px;display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.cal-card:hover .cal-card-actions{opacity:1;}
.cal-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--muted);text-align:center;gap:8px;grid-column:1/-1;}
.cal-sort-bar{display:flex;align-items:center;gap:8px;margin-bottom:1rem;flex-wrap:wrap;}

/* ═══ MONTHLY CALENDAR GRID ═══ */
.month-cal-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.month-cal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--dark);}
.month-cal-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.02em;}
.month-cal-title span{color:var(--blue);font-style:italic;}
.month-cal-nav{display:flex;gap:6px;align-items:center;}
.month-cal-nav button{width:32px;height:32px;border:1.5px solid rgba(255,255,255,.15);border-radius:var(--rsm);background:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:'Montserrat',sans-serif;}
.month-cal-nav button:hover{border-color:var(--blue);color:#fff;background:rgba(60,191,240,.15);}
.month-cal-nav .today-btn{width:auto;padding:0 14px;font-size:11px;font-weight:700;letter-spacing:.04em;}
.month-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.month-cal-dayname{padding:8px 4px;text-align:center;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);background:var(--off);}
.month-cal-cell{min-height:96px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:4px;position:relative;transition:background .1s;vertical-align:top;}
.month-cal-cell:nth-child(7n){border-right:none;}
.month-cal-cell:hover{background:rgba(60,191,240,.03);}
.month-cal-cell.other-month{background:var(--off);}
.month-cal-cell.other-month .month-cal-daynr{color:var(--border);}
.month-cal-cell.today .month-cal-daynr{background:var(--blue);color:#fff;border-radius:50%;}
.month-cal-cell.today{background:rgba(60,191,240,.04);}
.month-cal-daynr{font-size:11px;font-weight:700;color:var(--muted);width:22px;height:22px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;cursor:default;}
.month-cal-event{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:opacity .1s;display:flex;align-items:center;gap:3px;}
.month-cal-event:hover{opacity:.8;}
.month-cal-event .evdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.month-cal-more{font-size:10px;font-weight:700;color:var(--blue);cursor:pointer;padding:1px 4px;border-radius:3px;}
.month-cal-more:hover{background:var(--blue-light);}
.month-cal-add-cell{position:absolute;bottom:4px;right:4px;width:18px;height:18px;border-radius:4px;background:none;border:1px dashed var(--border);color:var(--muted);font-size:14px;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;line-height:1;}
.month-cal-cell:hover .month-cal-add-cell{display:flex;}
.month-cal-add-cell:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}

/* Portal mobiele kalender lijstweergave */
.p-cal-list-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 12px;border-radius:var(--rsm);margin-bottom:4px;
  background:var(--white);border:1px solid var(--border);
  cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.p-cal-list-item:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(60,191,240,.1);}
.p-cal-list-today{border-left:3px solid var(--blue)!important;}
.p-cal-list-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}

/* Cal event context menu button hover fix */
.cal-event-menu-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 12px;background:none;border:none;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--black);
  border-radius:6px;font-family:'Montserrat',sans-serif;
  transition:background .12s,color .12s;outline:none;
}
.cal-event-menu-btn:hover{background:var(--off);}
.cal-event-menu-btn:focus{outline:none;background:var(--off);}
.cal-event-menu-btn.danger{color:var(--danger);}
.cal-event-menu-btn.danger:hover{background:var(--danger-bg);}
.cal-event-menu-btn.danger:focus{background:var(--danger-bg);outline:none;}
.cal-event-menu-link{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 12px;background:none;border:none;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--blue);
  border-radius:6px;text-decoration:none;font-family:'Montserrat',sans-serif;
  transition:background .12s;outline:none;
}
.cal-event-menu-link:hover{background:var(--off);}
.cal-event-menu-link:focus{outline:none;background:var(--off);}

/* SLIDE-IN ANIMATIE TABBLADEN */
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-22px);}
  to{opacity:1;transform:translateX(0);}
}
.apage.slide-in{animation:slideInLeft .22s cubic-bezier(.4,0,.2,1) both;}

/* ═══ MOBILE: Responsiviteit ═══ */
@media(max-width:640px){
  /* Kalenderraster */
  .month-cal-cell{min-height:60px;padding:2px;}
  .month-cal-event{font-size:9px;padding:1px 4px;}
  .month-cal-daynr{font-size:10px;width:18px;height:18px;}
  .month-cal-header{padding:.75rem 1rem;flex-wrap:wrap;gap:8px;}
  .month-cal-title{font-size:15px;}
  .month-cal-nav{gap:4px;}
  .month-cal-nav button{width:28px;height:28px;font-size:14px;}

  /* Sidebar als slide-over overlay */
  .sidebar{
    transform:translateX(-100%);
    position:fixed;z-index:500;top:0;left:0;height:100vh;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    width:260px!important;min-width:260px!important;
    overflow-y:auto;padding:1.5rem 0;
  }
  .sidebar.mob-open{transform:translateX(0);}

  /* Admin main neemt volledige breedte */
  .admin-main{width:100%;margin-left:0;}

  /* Topbar */
  .topbar-big{padding:.875rem 1rem;flex-wrap:nowrap;gap:8px;align-items:center;}
  .topbar-big h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar-big > div:nth-child(2){flex:1;min-width:0;}
  .topbar-big p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar-right{flex-wrap:wrap;gap:6px;flex-shrink:0;}

  /* Paginascrolling: altijd naar beneden scrollbaar */
  .apage{
    padding:.875rem 1rem 4rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* grid-row zit al correct in admin-main */
  }

  /* Grids */
  .mgrid{grid-template-columns:1fr 1fr;}
  .mgrid3{grid-template-columns:1fr;}
  .dash-grid{grid-template-columns:1fr;}
  .dash-widget.col-6,.dash-widget.col-4,.dash-widget.col-3{grid-column:span 1;}
  .proj-grid{grid-template-columns:1fr;}
  .clients-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}

  /* Knoppen: minimale raakoppervlakte 44px */
  .btn-blue,.btn-ghost,.btn-main{min-height:44px;padding:10px 14px;}
  .btn-smb,.btn-smr{min-height:36px;padding:5px 10px;font-size:11px;}
  .cb-portal{min-height:40px;}
  .cb-btns{flex-wrap:wrap;}

  /* Modals: bottom-sheet stijl */
  .modal-bg{align-items:flex-end;}
  .modal{
    padding:1.25rem 1rem 2rem;
    max-width:100%!important;
    width:100%;
    margin:0;
    border-radius:16px 16px 0 0;
    max-height:90vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .modal-title{font-size:17px;margin-bottom:1.25rem;}
  .mrow{grid-template-columns:1fr;}
  .modal-footer{flex-direction:column-reverse;gap:8px;padding-top:1rem;}
  .modal-footer .btn-ghost,
  .modal-footer .btn-blue{width:100%;text-align:center;justify-content:center;min-height:48px;}

  /* Tabellen: wrapper horizontaal scrollbaar, tabel zelf heeft min-width */
  .tbl{font-size:12px;min-width:500px;}
  .tbl th,.tbl td{padding:8px 10px;white-space:nowrap;}
  /* Elke card met een tabel erin moet overflow:auto krijgen */
  .card{overflow:hidden;}
  .card > div{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ca-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Klantdetail */
  .ctabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;border-radius:var(--r) var(--r) 0 0;}
  .ctab{white-space:nowrap;flex-shrink:0;padding:10px 14px;font-size:11px;}
  .ctab-page{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* Voorkomt dat content buiten het scherm valt */
    max-width:100vw;
  }
  .proj-detail-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
  .pdtab{white-space:nowrap;flex-shrink:0;font-size:11px;padding:10px 14px;}
  .pdtab-page{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .client-detail-hero{flex-direction:column;gap:10px;padding:1rem;}
  .client-detail-hero > div:last-child{align-items:flex-start!important;}

  /* Kaartkoppen */
  .card-hdr{flex-wrap:wrap;gap:8px;}

  /* Content kalender tabs */
  .cal-tabs{flex-wrap:wrap;width:100%;}
  .cal-tab{flex:1;text-align:center;font-size:11px;padding:7px 10px;}

  /* Content kalender grid: altijd één kolom op mobiel */
  .cal-grid{grid-template-columns:1fr!important;}
  #pp-planning .cal-grid{grid-template-columns:1fr!important;padding:0 1rem 1rem;}
  .cal-card{min-width:0;}

  /* Rapportage grids naar kolom */
  #ap-rapportage > div[style*="grid-template-columns:1.6fr"],
  #ap-rapportage > div[style*="grid-template-columns:1fr 1fr"]{
    display:flex!important;flex-direction:column!important;
  }

  /* Portal navigatie: hamburgermenu tonen, tabs verbergen */
  #portal-mob-btn{display:flex!important;}
  #portal-mob-logout{display:flex!important;margin-left:auto;}
  .ptabs{display:none!important;}
  .p-out{display:none!important;}
  .portal-nav{padding:.75rem 1rem;height:auto;justify-content:flex-start;gap:8px;}
  .portal-nav .p-logo{flex:1;min-width:0;justify-content:center;}

  .portal-body{
    padding:1rem 1rem 4rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--white);
    flex:1;
    min-height:0;
  }

  /* Portal tab-pages: volledig doorzichtig — witte portal-body is de achtergrond */
  .ptab-page{
    width:100%;
    min-width:0;
    overflow-x:visible;
    overflow-y:visible;
    background:transparent!important;
  }
  .ptab-page.active{
    background:transparent!important;
    display:flex;
  }

  /* Overview hero compacter */
  .p-hero{flex-direction:column;padding:1.25rem;}
  .portal-hero-stats{grid-template-columns:1fr 1fr;}
  #pp-overview > div[style*="grid-template-columns:1.4fr"]{
    display:flex!important;flex-direction:column!important;
  }

  /* Portal planning: volledige breedte, scrollbaar, zichtbaar */
  #pp-planning{
    overflow-x:visible!important;
    overflow-y:visible!important;
    padding:0!important;
    max-width:none!important;
    margin:0!important;
    width:100%!important;
    gap:0!important;
  }
  #pp-planning-header{padding:1rem 0 .75rem!important;}
  #pp-planning #p-cal-grid{
    padding:0!important;
    width:100%;
  }
  #pp-planning .month-cal-wrap{width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #pp-planning .month-cal-grid{min-width:320px;}

  /* Projectdetail tabs: niet-actieve pages transparant (geen grijs) */
  .proj-detail-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
  .pdtab{white-space:nowrap;flex-shrink:0;font-size:11px;padding:10px 14px;}
  .pdtab-page{
    display:none;
    background:var(--white);
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 var(--r) var(--r);
    padding:1rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .pdtab-page.active{display:block;}

  /* Contactpersonen wrappen op smal scherm */
  .contact-person{flex-wrap:wrap;gap:8px;}
  .contact-btns{margin-left:0;flex-wrap:wrap;}

  /* Projectfasen stepper: fix overflow op smal scherm */
  .status-timeline{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .st-step{min-width:56px;}
  .st-dot{width:26px;height:26px;font-size:9px;}
  .st-label{font-size:9px;}

  /* Login */
  .login-box{padding:1.5rem 1.25rem;}
  .login-title{font-size:24px;}
  .mode-bar{flex-wrap:wrap;}
}

/* Portal hamburger knop — standaard verborgen, mobiel zichtbaar */
#portal-mob-btn{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;
  background:none;border:1.5px solid var(--border);border-radius:var(--rsm);
  cursor:pointer;flex-shrink:0;margin-right:8px;transition:border-color .15s;
}
#portal-mob-btn:hover{border-color:var(--blue);}
#portal-mob-btn svg{pointer-events:none;}

/* Uitlogknop mobiel portaal — standaard verborgen, alleen mobiel zichtbaar */
#portal-mob-logout{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;
  background:none;border:1.5px solid var(--border);border-radius:var(--rsm);
  cursor:pointer;flex-shrink:0;margin-left:auto;
  color:var(--muted);transition:border-color .15s,color .15s;
}
#portal-mob-logout:hover{border-color:var(--danger);color:var(--danger);}

/* Hamburger-knop admin - standaard onzichtbaar, mobiel zichtbaar via media query */
#mob-menu-btn{
  display:none;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--rsm);
  cursor:pointer;flex-shrink:0;margin-right:12px;transition:border-color .15s;
  color:var(--dark);
}
#mob-menu-btn:hover{border-color:var(--blue);color:var(--blue);}
#mob-menu-btn svg{pointer-events:none;}

/* Mobiele backdrop */
#mob-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:499;
}
#mob-backdrop.open{display:block;}

/* Hyperlinks in document editor */
.doc-content a{color:var(--blue);text-decoration:underline;cursor:pointer;}
.doc-content a:hover{opacity:.75;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  /* Sidebar smaller on tablet */
  .sidebar{width:220px;min-width:220px;}
  .sb-logo{padding:1.25rem 1rem;}

  /* Grids: 2 columns on tablet */
  .mgrid{grid-template-columns:repeat(2,1fr);}
  .clients-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}

  /* Pipeline kanban: 3 columns max */
  #ctab-cpipeline [style*="grid-template-columns:repeat(auto-fill,minmax(320px"],
  [id^="portal-pipeline-items"] [style*="grid-template-columns:repeat(auto-fill"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* Portal dashboard cards: 2 cols */
  #p-dashboard-grid{grid-template-columns:1fr 1fr!important;}

  /* Stats table: allow horizontal scroll */
  #ap-stats .card{overflow-x:auto;}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET PORTRAIT (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* ── Hamburger zichtbaar op tablet ── */
  #mob-menu-btn{display:flex!important;}

  /* ── Admin sidebar als slide-over ── */
  .sidebar{
    transform:translateX(-100%);
    position:fixed;z-index:500;top:0;left:0;height:100vh;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    width:260px!important;min-width:260px!important;
    overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.15);
  }
  .sidebar.mob-open{transform:translateX(0);}
  .admin-main{margin-left:0;width:100%;}

  /* ── Grids naar 1 kolom ── */
  .mgrid{grid-template-columns:1fr!important;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .clients-grid{grid-template-columns:1fr!important;}
  .team-grid{grid-template-columns:1fr!important;}
  .dash-grid{grid-template-columns:1fr!important;}
  .dash-widget.col-6,.dash-widget.col-4,.dash-widget.col-3{grid-column:span 1!important;}

  /* ── Pipeline op tablet ── */
  #ctab-cpipeline [style*="grid-template-columns:repeat(auto-fill,minmax(320px"],
  [id^="portal-pipeline-items"] [style*="grid-template-columns:repeat(auto-fill"]{
    grid-template-columns:1fr!important;
  }
  /* Fase summary kaarten: 3 kolommen */
  #ctab-cpipeline > div:first-child{
    grid-template-columns:repeat(3,1fr)!important;
  }

  /* ── Portal ── */
  #p-dashboard-grid{grid-template-columns:1fr!important;}
  .p-hero{flex-direction:column;padding:1.25rem;}
  .portal-hero-stats{grid-template-columns:1fr 1fr;}
  #pp-overview > div[style*="grid-template-columns"]{
    display:flex!important;flex-direction:column!important;
  }

  /* Portal tabs: scrollbaar */
  .ptabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;}
  .ptab{white-space:nowrap;flex-shrink:0;font-size:12px;padding:10px 14px;}

  /* ── Modals: bottom sheet ── */
  .modal-bg{align-items:flex-end!important;}
  .modal{
    padding:1.25rem 1.1rem 2rem;
    max-width:100%!important;width:100%;margin:0;
    border-radius:16px 16px 0 0;
    max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .mrow{grid-template-columns:1fr!important;}
  .modal-footer{flex-direction:column-reverse;gap:8px;padding-top:1rem;}
  .modal-footer .btn-ghost,.modal-footer .btn-blue{
    width:100%;text-align:center;justify-content:center;min-height:48px;
  }

  /* ── Klantdetail tabs ── */
  .ctabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;}
  .ctab{white-space:nowrap;flex-shrink:0;padding:10px 14px;font-size:11px;}

  /* ── Topbar ── */
  .topbar-big{padding:.875rem 1rem;flex-wrap:nowrap;gap:8px;}
  .topbar-big h1{font-size:16px;}
  .topbar-big p{font-size:11px;}

  /* ── Knoppen ── */
  .btn-blue,.btn-ghost,.btn-main{min-height:44px;}
  .cb-btns{flex-wrap:wrap;}

  /* ── Facturen/Offertes tabel ── */
  .tbl{font-size:12px;}
  .card{overflow:hidden;}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TELEFOON (max-width: 640px)
   — bestaande rules aangevuld hieronder
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  /* ── Hamburger zichtbaar op mobiel ── */
  #mob-menu-btn{display:flex!important;}

  /* ── Pipeline kaartjes: volledig breed ── */
  [id^="pipeline-kanban-"] [style*="grid-template-columns"],
  [id^="portal-pipeline-items"] [style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
  }
  /* Fase summary kaarten: 3 per rij op telefoon */
  .plcard-fase-summary{grid-template-columns:repeat(3,1fr)!important;}

  /* ── Portal bottom nav: alleen op portaal scherm ── */
  body[data-screen="s-portal"] #p-bottom-nav{display:flex!important;}
  .ptabs{display:none!important;}
  .p-out{display:none!important;}
  .portal-nav{padding:.75rem 1rem;}

  /* Bottom nav items */
  #p-bottom-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;z-index:200;
    background:var(--white);border-top:1.5px solid var(--border);
    padding:6px 8px max(8px,env(safe-area-inset-bottom));
    flex-direction:row;justify-content:space-around;align-items:center;
    gap:4px;
  }
  .p-bnav-item{
    display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:6px 12px;border-radius:10px;
    font-size:9px;font-weight:700;color:var(--muted);
    background:none;border:none;cursor:pointer;
    transition:all .15s;font-family:'Montserrat',sans-serif;
    letter-spacing:.04em;text-transform:uppercase;
    flex:1;max-width:80px;
  }
  .p-bnav-item svg{width:20px;height:20px;}
  .p-bnav-item.active{color:var(--blue);}
  .p-bnav-item.active svg{stroke:var(--blue);}

  /* Extra padding onderaan portal body voor bottom nav */
  .portal-body{padding-bottom:80px!important;}
  .ptab-page{padding-bottom:80px;}

  /* ── Pipeline maand-selector op mobiel ── */
  #pipeline-month-sel-,
  [id^="pipeline-month-sel-"],
  [id^="portal-pipeline-month-"]{
    max-width:100%!important;width:100%!important;
  }
  [id^="pipeline-month-sel-"] + button{
    width:100%!important;
  }

  /* ── Portal dashboard grid: 1 kolom ── */
  #p-dashboard-grid{grid-template-columns:1fr!important;}

  /* ── Video embed op smal scherm ── */
  .plcard-embed-wrap{padding-top:56.25%;}

  /* ── Script modal fields ── */
  [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr!important;
  }

  /* ── KPI grid: 2 kolommen ── */
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* ── Fase summary 3 kolommen ── */
  #ctab-cpipeline > div:first-child{
    grid-template-columns:repeat(3,1fr)!important;
  }
}

/* ── Portal bottom nav: standaard verborgen (desktop) ── */
#p-bottom-nav{display:none;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — AANVULLINGEN v2.8.6
   Nieuwe componenten (platform-uitsplitsing, vergelijkings-KPI's,
   sorteerbare tabellen) + touch-verfijningen. Eén samenhangend blok
   zodat het onderhoudbaar blijft.
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: platform-uitsplitsing en KPI-grid naar 2 kolommen */
@media(max-width:768px){
  .platform-split-grid{grid-template-columns:repeat(2,1fr)!important;}
  .stat-kpi-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* Sorteerbare kolomkoppen: groter tikgebied */
  .stat-sort-th,.tbl th[onclick]{padding-top:16px;padding-bottom:12px;}

  /* Sorteerpijl iets groter zodat de actieve kolom duidelijk is */
  .sth-arrow{font-size:11px;}
}

/* Telefoon: alles naar 1 kolom waar het krap wordt */
@media(max-width:640px){
  .platform-split-grid{grid-template-columns:1fr!important;}
  .stat-kpi-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* Statistiek-KPI kaarten compacter zodat 2 naast elkaar passen */
  .stat-kpi-grid .mcard{padding:12px 14px;}
  .stat-kpi-grid .mcard-val{font-size:20px;}

  /* Tabellen: comfortabele leesgrootte + tikbare rijen */
  .tbl td{padding-top:12px;padding-bottom:12px;}

  /* Actieknoppen in tabelrijen: mogen wrappen i.p.v. overlopen */
  #stats-body td:last-child,
  #projects-body td:last-child{flex-wrap:wrap;}
  #stats-body td:last-child button,
  #stats-body td:last-child .btn-smb,
  #stats-body td:last-child .btn-ghost{min-height:36px;}

  /* Inline token-waarschuwing: tekst mag afbreken */
  [style*="border-left:3px solid"]{word-break:break-word;}

  /* Sorteerbare koppen: nog iets groter tikgebied op telefoon */
  .stat-sort-th,.tbl th[onclick]{padding:16px 12px 12px;}
}

/* Zeer smal (kleine telefoons): platform-uitsplitsing blijft leesbaar */
@media(max-width:380px){
  .stat-kpi-grid{grid-template-columns:1fr!important;}
  .topbar-big h1{font-size:15px;}
  .p-bnav-item{font-size:8px;padding:6px 8px;}
  .p-bnav-item svg{width:18px;height:18px;}
}

/* Touch-apparaten algemeen: hover-effecten niet plakken, tikgebieden ruim */
@media(hover:none){
  .tbl th[onclick]:active,.stat-sort-th:active{background:var(--off);}
  .btn-blue,.btn-ghost,.btn-main,.btn-smb{touch-action:manipulation;}
}

/* iOS zoomt automatisch in wanneer een invoerveld < 16px is en focus
   krijgt -- dat geeft een schokkerige ervaring. Op telefoon forceren we
   daarom 16px op alle invoervelden. De visuele maatvoering blijft gelijk
   via padding; alleen de tekst wordt iets groter. */
@media(max-width:640px){
  input,select,textarea,
  .c-input-row input,.add-subtask-row input,.bb-tag-input input,
  .modal input,.modal select,.modal textarea{
    font-size:16px!important;
  }
}

/* Meting-invoerrijen in de statistieken-modal: op telefoon stapelen
   zodat de 3 platformknoppen + views + interacties niet samendrukken. */
@media(max-width:640px){
  .esm-row2{
    grid-template-columns:1fr 1fr!important;
    grid-auto-rows:auto;
  }
  /* Platformknoppen op eigen volle regel boven de cijfervelden */
  .esm-row2 > div:first-child{
    grid-column:1 / -1;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  /* Engagement-uitkomst naast de cijfers, niet als losse smalle kolom */
  .esm-row2 > div:last-child{
    grid-column:1 / -1;
    text-align:left!important;
    padding-top:2px;
  }
  .esm-row1{grid-template-columns:1fr auto!important;}
  /* Datum en naam onder elkaar op smal scherm */
  .esm-row1 input[type="date"]{grid-column:1 / -1;}
}

/* ═══ PLANNING — weekweergave ═══ */
.plan-week-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
}
.plan-day-col{
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--rsm);
  padding:8px;min-height:140px;display:flex;flex-direction:column;gap:6px;
}
.plan-day-col.plan-today{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.plan-day-hdr{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:700;color:var(--muted);
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.plan-today .plan-day-hdr{color:var(--blue);}
.plan-block{
  background:var(--off);border-radius:6px;padding:7px 8px;cursor:pointer;
  transition:transform .1s,box-shadow .1s;
}
.plan-block:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.plan-add-cell{
  margin-top:auto;background:none;border:1.5px dashed var(--border);border-radius:6px;
  color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;padding:4px;
  transition:all .12s;
}
.plan-add-cell:hover{border-color:var(--blue);color:var(--blue);}

/* Tablet: 2 kolommen naast elkaar, dagen stapelen */
@media(max-width:1024px){
  .plan-week-grid{grid-template-columns:repeat(2,1fr);}
  .plan-day-col{min-height:100px;}
}
/* Telefoon: dagen onder elkaar, weekend compact */
@media(max-width:640px){
  .plan-week-grid{grid-template-columns:1fr;}
  .plan-day-col{min-height:0;}
}

/* Afwezigheid-stroken in de weekweergave */
.plan-absence{
  display:flex;align-items:center;gap:5px;
  border-radius:6px;padding:5px 8px;font-size:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Beschikbaarheids-chips in de weekweergave */
.plan-avail{
  display:flex;align-items:center;gap:4px;
  font-size:9px;font-weight:700;color:var(--muted);
  padding:3px 6px;background:var(--off);border-radius:5px;
}

/* ═══════════════════════════════════════════════════════════════
   INZICHTEN — adviespagina
   Rustige kaarten met ruime marges. De tekst krijgt een maximale
   leesbreedte zodat regels niet van rand tot rand lopen, en het
   kerncijfer staat los rechtsboven in plaats van tegen de tekst aan.
   ═══════════════════════════════════════════════════════════════ */

.inz-card{
  background:var(--white);
  border:1px solid var(--border);
  border-left:3px solid var(--sev,var(--border));
  border-radius:var(--r);
  overflow:hidden;
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.inz-card:hover{
  box-shadow:0 3px 14px rgba(20,20,40,.07);
  border-color:var(--sev,var(--border));
}
.inz-card.inz-af{opacity:.55;}
.inz-card.inz-af:hover{opacity:.8;}

/* Ruime binnenmarge = de gevraagde witruimte */
.inz-body{padding:20px 24px 14px;}
.inz-card [role="button"]{cursor:pointer;}

/* Bovenrij: labels links, kerncijfer rechts — met echte afstand ertussen */
.inz-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;margin-bottom:10px;
}
.inz-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.inz-sev{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--sev);background:var(--sev-bg);
  padding:3px 10px;border-radius:20px;white-space:nowrap;
}
.inz-cat{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);white-space:nowrap;
}
.inz-metric{
  font-size:22px;font-weight:700;color:var(--sev);
  white-space:nowrap;line-height:1;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}

/* Tekst met leesbreedte: voorkomt regels van rand tot rand */
.inz-title{
  font-size:15px;font-weight:700;line-height:1.35;
  margin:0 0 6px;max-width:62ch;
}
.inz-text{
  font-size:12.5px;line-height:1.65;color:var(--black);
  margin:0;max-width:68ch;
}

/* Advies duidelijk afgescheiden van de constatering */
.inz-action{
  display:flex;gap:8px;align-items:flex-start;
  margin-top:12px;padding-top:12px;
  border-top:1px dashed var(--border);
  font-size:12.5px;line-height:1.55;font-weight:600;color:var(--blue);
  max-width:68ch;
}
.inz-action-arrow{flex-shrink:0;opacity:.8;}

/* Voetrij: onderbouwing links, afvinken rechts */
.inz-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:14px;
}
.inz-expand{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;padding:0;cursor:pointer;
  font-size:11px;font-weight:700;color:var(--muted);
  font-family:inherit;transition:color .14s;
}
.inz-expand:hover{color:var(--blue);}
.inz-chev{display:inline-block;transition:transform .18s ease;font-size:10px;}
.inz-chev[data-open]{transform:rotate(180deg);}

.inz-btn{
  background:none;border:1.5px solid var(--border);border-radius:var(--rsm);
  padding:5px 12px;font-size:10.5px;font-weight:700;color:var(--muted);
  cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:all .14s;
}
.inz-btn-done:hover{border-color:var(--success);color:var(--success);background:#16a34a0d;}
.inz-btn-back:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}

/* Onderbouwing */
.inz-bewijs{
  display:none;border-top:1px solid var(--border);
  background:var(--off);padding:16px 24px 18px;
}
.inz-bewijs-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:12px;
}
.inz-bewijs-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px 28px;margin:0;
}
.inz-bewijs-rij{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.inz-bewijs-rij dt{font-size:11.5px;color:var(--muted);margin:0;min-width:0;}
.inz-bewijs-rij dd{
  font-size:12.5px;font-weight:700;margin:0;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Telefoon: kerncijfer onder de labels i.p.v. ernaast */
@media(max-width:640px){
  .inz-body{padding:16px 16px 12px;}
  .inz-top{flex-direction:column;gap:8px;}
  .inz-metric{font-size:19px;}
  .inz-bewijs{padding:14px 16px 16px;}
  .inz-bewijs-grid{grid-template-columns:1fr;gap:8px;}
  .inz-foot{flex-wrap:wrap;gap:10px;}
}

/* ── Inzichten: samenvattingsbalk bovenaan ── */
.inz-hero{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:22px 26px;margin-bottom:18px;
}
.inz-hero-oordeel{display:flex;align-items:center;gap:14px;min-width:0;}
.inz-hero-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
}
.inz-hero-titel{font-size:17px;font-weight:700;line-height:1.3;}
.inz-hero-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.inz-hero-cijfers{display:flex;gap:34px;flex-wrap:wrap;}
.inz-hero-kpi{min-width:96px;}
.inz-hero-kpi-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:4px;
}
.inz-hero-kpi-val{
  font-size:24px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.inz-hero-kpi-eenheid{font-size:13px;font-weight:600;opacity:.6;margin-left:1px;}
.inz-hero-kpi-sub{font-size:11px;color:var(--muted);margin-top:5px;}

/* ── Filterbalk ── */
.inz-filters{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
}
.inz-filter{
  padding:6px 14px;font-size:11px;font-weight:700;font-family:inherit;
  border:1.5px solid var(--border);border-radius:20px;
  background:var(--white);color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:all .14s;
}
.inz-filter:hover{border-color:var(--blue);color:var(--blue);}
.inz-filter-on{
  border-color:var(--blue);background:var(--blue-light);color:var(--blue);
}
.inz-filter-n{opacity:.65;margin-left:2px;}
.inz-filter-div{width:1px;height:20px;background:var(--border);margin:0 5px;}

/* ── Lijst met ruime tussenafstand ── */
.inz-lijst{display:flex;flex-direction:column;gap:12px;}

/* ── Afgevinkte sectie ── */
.inz-afsectie{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);}
.inz-afkop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.inz-link{
  background:none;border:none;padding:0;cursor:pointer;
  font-size:11px;font-weight:700;color:var(--blue);font-family:inherit;
}
.inz-link:hover{text-decoration:underline;}

/* ── Lege staten ── */
.inz-leeg{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:26px;
  text-align:center;color:var(--muted);font-size:12.5px;
}
.inz-leeg-groot{padding:44px 26px;}
.inz-leeg-icon{
  width:42px;height:42px;border-radius:50%;
  background:#16a34a18;color:#16a34a;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;margin:0 auto 12px;
}
.inz-leeg-titel{font-size:15px;font-weight:700;color:var(--black);margin-bottom:5px;}
.inz-leeg p{margin:0;max-width:44ch;margin-inline:auto;line-height:1.6;}

.inz-voet{
  font-size:11px;color:var(--muted);margin-top:20px;
  line-height:1.7;max-width:80ch;
}

@media(max-width:768px){
  .inz-hero{padding:18px 18px;gap:20px;}
  .inz-hero-cijfers{gap:24px;width:100%;}
  .inz-hero-kpi-val{font-size:21px;}
}
@media(max-width:640px){
  .inz-hero-titel{font-size:15px;}
  .inz-hero-cijfers{justify-content:space-between;}
  .inz-hero-kpi{min-width:0;flex:1;}
  .inz-filters{gap:6px;}
  .inz-filter{padding:5px 11px;font-size:10.5px;}
}

/* ═══ WEEKSTART ═══ */
.ws-hero{
  display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  padding:22px 26px;margin-bottom:16px;
}
.ws-hero-eyebrow{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:5px;
}
.ws-hero-titel{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.ws-hero-cap{display:flex;gap:22px;flex-wrap:wrap;}
.ws-cap{min-width:150px;}
.ws-cap-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;}
.ws-cap-naam{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;}
.ws-cap-naam i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.ws-cap-uren{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.ws-cap-baan{height:5px;background:var(--off);border-radius:3px;overflow:hidden;}
.ws-cap-baan div{height:100%;border-radius:3px;transition:width .2s;}

.ws-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.ws-kaart{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  padding:18px 20px;
}
.ws-breed{grid-column:1/-1;}
.ws-kaart-kop{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:14px;
}
.ws-dag{margin-bottom:14px;}
.ws-dag:last-child{margin-bottom:0;}
.ws-dag-kop{
  font-size:12px;font-weight:700;margin-bottom:6px;
  padding-bottom:5px;border-bottom:1px solid var(--border);
}
.ws-dag-nu .ws-dag-kop{color:var(--blue);border-color:var(--blue);}
.ws-nu{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  background:var(--blue-light);color:var(--blue);padding:2px 7px;border-radius:20px;margin-left:6px;
}
.ws-blok{
  display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:12px;
}
.ws-blok-tijd{
  font-size:11px;font-weight:700;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums;min-width:82px;
}
.ws-blok-txt{flex:1;min-width:0;line-height:1.5;}
.ws-blok-wie{display:flex;gap:3px;flex-shrink:0;}
.ws-blok-wie i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.ws-afwezig{
  font-size:11px;padding:4px 8px;background:var(--off);border-radius:6px;
  margin:3px 0;color:var(--muted);
}
.ws-lijst{list-style:none;display:flex;flex-direction:column;gap:11px;}
.ws-lijst li{display:flex;gap:11px;align-items:flex-start;font-size:12px;line-height:1.5;}
.ws-badge{
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:var(--off);color:var(--muted);white-space:nowrap;flex-shrink:0;
}
.ws-badge-oranje{background:var(--warning-bg);color:var(--warning);}
.ws-badge-rood{background:var(--danger-bg);color:var(--danger);}
.ws-sub{font-size:11px;color:var(--muted);}
.ws-leeg{font-size:12px;color:var(--muted);padding:6px 0;}
.ws-acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}

/* ═══ FINANCIËN ═══ */
.fin-tabs{
  display:flex;gap:4px;background:var(--off);border-radius:var(--rsm);
  padding:3px;margin-bottom:16px;width:fit-content;flex-wrap:wrap;
}
.fin-tab{
  padding:7px 16px;font-size:11.5px;font-weight:700;font-family:inherit;
  border:none;border-radius:calc(var(--rsm) - 2px);background:none;
  color:var(--muted);cursor:pointer;transition:all .14s;white-space:nowrap;
}
.fin-tab:hover{color:var(--blue);}
.fin-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}

.fin-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:16px;
}
.fin-kpi{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;
}
.fin-kpi-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:6px;
}
.fin-kpi-val{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;}
.fin-kpi-sub{font-size:10.5px;color:var(--muted);margin-top:4px;}

.fin-prog{display:flex;flex-direction:column;gap:10px;}
.fin-prog-rij{display:flex;align-items:center;gap:14px;}
.fin-prog-lbl{
  font-size:11px;font-weight:700;color:var(--muted);
  min-width:58px;white-space:nowrap;
}
.fin-prog-baan{
  flex:1;height:20px;background:var(--off);border-radius:5px;
  overflow:hidden;display:flex;
}
.fin-prog-deel{height:100%;transition:width .2s;}
.fin-prog-val{
  font-size:12px;font-weight:700;min-width:76px;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fin-legenda{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--muted);
}
.fin-legenda span{display:flex;align-items:center;gap:6px;}
.fin-legenda i{width:9px;height:9px;border-radius:2px;display:inline-block;}

/* ═══ OFFERTE-ASSISTENT ═══ */
.ofa-sjablonen{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px;}
.ofa-sjabloon{
  padding:7px 14px;font-size:11px;font-weight:700;font-family:inherit;
  border:1.5px solid var(--border);border-radius:20px;background:var(--white);
  color:var(--muted);cursor:pointer;transition:all .14s;
}
.ofa-sjabloon:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}

.ofa-panel{
  background:var(--off);border:1px solid var(--border);
  border-radius:var(--rsm);padding:14px 16px;
}
.ofa-top{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px;}
.ofa-veld{flex:1;min-width:130px;}
.ofa-veld label{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:5px;
}
.ofa-veld input{
  width:100%;padding:7px 10px;border:1.5px solid var(--border);
  border-radius:var(--rsm);font-size:13px;font-family:inherit;
  outline:none;background:var(--white);
}
.ofa-veld input:focus{border-color:var(--blue);}
.ofa-kpi{min-width:96px;}
.ofa-kpi-lbl{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:5px;
}
.ofa-kpi-val{font-size:19px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.ofa-kpi-val span{font-size:11px;font-weight:600;opacity:.6;}

.ofa-waarschuwing{
  background:var(--warning-bg);color:var(--warning);
  border-radius:var(--rsm);padding:10px 13px;font-size:11.5px;line-height:1.6;
}
.ofa-goed{
  background:var(--success-bg);color:var(--success);
  border-radius:var(--rsm);padding:10px 13px;font-size:11.5px;line-height:1.6;
}
.ofa-hist{
  margin-top:10px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--rsm);padding:12px 14px;
}
.ofa-hist-kop{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:9px;
}
.ofa-hist-rij{
  display:flex;justify-content:space-between;gap:14px;font-size:11.5px;
  padding:4px 0;border-bottom:1px dotted var(--border);
}
.ofa-hist-rij:last-child{border-bottom:none;}
.ofa-hist-rij span:last-child{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}

@media(max-width:640px){
  .ws-hero{padding:16px 18px;gap:18px;}
  .ws-hero-cap{width:100%;gap:16px;}
  .ws-cap{flex:1;min-width:120px;}
  .ws-blok{flex-wrap:wrap;gap:5px;}
  .ws-blok-tijd{min-width:0;}
  .fin-kpis{grid-template-columns:repeat(2,1fr);}
  .fin-prog-lbl{min-width:44px;font-size:10px;}
  .fin-prog-val{min-width:62px;font-size:11px;}
  .ofa-top{gap:14px;}
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE v3 — volledige telefoon- en tabletoptimalisatie
   Dekt alle onderdelen gebouwd na de eerste mobiele ronde:
   Planning, Inzichten, Financiën, Weekstart en de offerte-assistent.
   Plus fundamentele fixes: iOS-invoerzoom, safe-areas (notch),
   aanraakdoelen en touch-gedrag.
   ═══════════════════════════════════════════════════════════════════ */

/* ── FUNDAMENT: geldt voor alle telefoons en tablets ─────────────── */
@media(max-width:768px){

  /* iOS Safari zoomt in op invoervelden kleiner dan 16px. Eén regel
     die dat overal voorkomt — de belangrijkste mobiele fix die er is. */
  input[type="text"],input[type="number"],input[type="date"],
  input[type="time"],input[type="email"],input[type="password"],
  input[type="search"],select,textarea{
    font-size:16px!important;
  }

  /* Aanraakdoelen: knoppen buiten modals waren 24-32px hoog.
     Richtlijn is minimaal 44px; 42px met marge is werkbaar. */
  .btn-ghost,.btn-blue{
    min-height:42px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .inz-btn,.inz-expand,.fin-tab,.inz-filter,.ofa-sjabloon{
    min-height:40px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .plan-add-cell{min-height:42px;}
  .sb-item{padding:12px;min-height:44px;}

  /* Safe-areas voor telefoons met notch/home-balk
     (viewport-fit=cover staat al in de meta-tag) */
  .sidebar{
    padding-top:calc(1.5rem + env(safe-area-inset-top,0px));
    padding-left:env(safe-area-inset-left,0px);
  }
  .modal{
    padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px));
    max-height:88vh;max-height:92dvh;
  }
  /* Horizontaal scrollende tabellen: momentum-scroll + geen
     dubbele randen als de kaart de tabel al omkadert */
  [style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch;}

  /* Toasts niet achter de home-balk */
  .toast{bottom:calc(18px + env(safe-area-inset-bottom,0px));}
}

/* ── PLANNING ────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* De kopbalk had zeven bedieningselementen op één rij. Op telefoon:
     nette rijen — tabs volle breedte, dan filter, dan weeknavigatie,
     dan de actieknoppen naast elkaar. */
  .plan-hdr{gap:10px!important;}
  .plan-hdr>div:first-child{ /* weergave-tabs */
    width:100%;display:flex;
  }
  .plan-hdr>div:first-child button{flex:1;min-height:42px;}
  .plan-hdr>select{ /* teamlid-filter */
    flex:1;min-width:0;min-height:42px;
  }
  .plan-hdr-right{
    width:100%;margin-left:0!important;
    display:grid!important;
    grid-template-columns:auto auto 1fr;
    gap:8px!important;align-items:center;
  }
  .plan-hdr-right>span{ /* weeklabel */
    grid-column:1/-1;order:-1;
    white-space:normal!important;text-align:center;
    font-size:13px!important;padding:2px 0;
  }
  .plan-hdr-right .btn-blue,
  .plan-hdr-right .btn-ghost{width:100%;}

  /* Capaciteitskaarten onder elkaar, volle breedte */
  #planning-body [style*="min-width:160px"]{min-width:100%!important;}

  /* Blokken: groter aanraakvlak */
  .plan-block{padding:10px 11px;}

  /* Afwezigheids-paneel: goedkeurknoppen volle breedte */
  #planning-body .card [onclick*="decideAbsence"]{
    flex:1;min-height:42px;
  }
}
@media(max-width:640px){
  /* Urenrapport-tabellen: kolom Omschrijving smaller afkappen */
  #planning-body .tbl td{font-size:12px;}
}

/* Tablet: weekraster als 7 kolommen is te krap, 2 te leeg — 4+3 werkt */
@media(min-width:641px) and (max-width:1024px){
  .plan-week-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ── INZICHTEN ───────────────────────────────────────────────────── */
@media(max-width:768px){
  /* Filters: één horizontaal scrollende rij in plaats van drie
     omgeklapte rijen chips die het scherm vullen */
  .inz-filters{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;margin-bottom:12px;
    scrollbar-width:none;
  }
  .inz-filters::-webkit-scrollbar{display:none;}
  .inz-filter{flex-shrink:0;}
  .inz-filter-div{flex-shrink:0;}

  /* Voetrij van een kaart: knoppen goed uit elkaar */
  .inz-foot{flex-wrap:wrap;gap:10px;}
  .inz-btn{padding:8px 16px;}
}

/* ── FINANCIËN ───────────────────────────────────────────────────── */
@media(max-width:768px){
  .fin-tabs{width:100%;}
  .fin-tab{flex:1;padding:9px 8px;font-size:11px;}
  .fin-kpis{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:641px) and (max-width:1024px){
  .fin-kpis{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:400px){
  .fin-kpi-val{font-size:16px;}
  .fin-prog-lbl{min-width:40px;}
}

/* ── WEEKSTART ───────────────────────────────────────────────────── */
@media(max-width:768px){
  .ws-grid{grid-template-columns:1fr;}
  .ws-acties{display:grid;grid-template-columns:1fr;gap:8px;}
  .ws-acties .btn-ghost{width:100%;}
  .ws-hero-titel{font-size:17px;}
}

/* ── OFFERTEMODAL: assistent + sjablonen ─────────────────────────── */
@media(max-width:768px){
  /* Sjablonen: horizontaal scrollend, niet stapelen */
  .ofa-sjablonen{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:none;
  }
  .ofa-sjablonen::-webkit-scrollbar{display:none;}
  .ofa-sjabloon{flex-shrink:0;}

  /* Assistent: urenveld volle breedte, de twee KPI's ernaast
     als rij eronder */
  .ofa-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;}
  .ofa-top .ofa-veld{grid-column:1/-1;min-width:0;}
  .ofa-top .ofa-kpi{min-width:0;}
}

/* ── BESCHIKBAARHEID & CAPACITEIT modals ─────────────────────────── */
@media(max-width:640px){
  /* Toggle-raster: grotere aanraakvlakken */
  #avail-grid button{min-height:44px;}
  #avail-week-nav .btn-ghost{flex:1;}
  /* Teamlid-checkboxes in planblok-modal: onder elkaar */
  #plb-tm-wrap{flex-direction:column;}
  #plb-tm-wrap label{min-height:46px;}
}

/* ── TOUCH-GEDRAG: geen hover-effecten die blijven plakken ───────── */
@media(hover:none){
  .plan-block:hover{transform:none;box-shadow:none;}
  .inz-card:hover{box-shadow:none;transform:none;border-color:var(--border);}
  .inz-card:hover{border-left-color:var(--sev,var(--border));}
  .plan-block,.inz-body,.fin-tab,.inz-filter,.ofa-sjabloon,
  .plan-add-cell,.inz-btn,.inz-expand{touch-action:manipulation;}
  /* Actieve staat als feedback in plaats van hover */
  .plan-block:active{background:var(--border);}
  .inz-btn:active,.fin-tab:active,.inz-filter:active{opacity:.7;}
}

/* ── TABLET LANDSCAPE: benut de breedte ──────────────────────────── */
@media(min-width:769px) and (max-width:1024px){
  .inz-hero{padding:20px 22px;}
  .ws-grid{grid-template-columns:repeat(2,1fr);}
  .ws-breed{grid-column:1/-1;}
}

/* ── KLEINE TELEFOONS (≤380px) ───────────────────────────────────── */
@media(max-width:380px){
  .inz-metric{font-size:18px;}
  .inz-hero-kpi-val{font-size:19px;}
  .plan-hdr-right{grid-template-columns:1fr 1fr;}
  .plan-hdr-right>button:first-of-type{grid-column:auto;}
  .fin-tab{font-size:10px;padding:9px 4px;}
}

/* ═══ COMMANDOPALET ═══ */
#cmd-zoek-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-left:auto;margin-right:10px;
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--rsm);
  color:var(--muted);cursor:pointer;transition:all .15s;flex-shrink:0;
}
#cmd-zoek-btn:hover{border-color:var(--blue);color:var(--blue);}
.topbar-right{margin-left:0;}

#cmd-palet{display:none;position:fixed;inset:0;z-index:600;}
.cp-bg{position:absolute;inset:0;background:rgba(20,20,35,.45);backdrop-filter:blur(2px);}
.cp-box{
  position:relative;max-width:560px;margin:12vh auto 0;
  background:var(--white);border-radius:var(--r);
  box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;
}
#cp-input{
  width:100%;border:none;outline:none;padding:17px 20px;
  font-size:15px;font-family:inherit;
  border-bottom:1px solid var(--border);
}
.cp-lijst{max-height:46vh;overflow-y:auto;padding:7px;}
.cp-item{
  display:flex;align-items:baseline;gap:10px;
  padding:10px 13px;border-radius:var(--rsm);cursor:pointer;font-size:13px;
}
.cp-actief{background:var(--blue-light);}
.cp-type{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:2px 8px;border-radius:20px;flex-shrink:0;
  background:var(--off);color:var(--muted);
}
.cp-type-klant{background:#eef6ee;color:#1a7a3c;}
.cp-type-project{background:#eef3ff;color:#0e90c8;}
.cp-naam{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-leeg{padding:22px;text-align:center;color:var(--muted);font-size:13px;}
.cp-voet{
  display:flex;gap:16px;justify-content:center;
  padding:9px;border-top:1px solid var(--border);
  font-size:10px;color:var(--muted);background:var(--off);
}
@media(max-width:640px){
  .cp-box{margin:0;max-width:100%;height:100%;border-radius:0;display:flex;flex-direction:column;}
  .cp-lijst{max-height:none;flex:1;}
  #cp-input{padding-top:calc(17px + env(safe-area-inset-top,0px));}
  .cp-voet{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   RAAD VAN COMMISSARISSEN
   Bestuurlijke toon: rustiger dan de rest van het dashboard, meer
   leesruimte, en de commissarissen visueel herkenbaar per portefeuille.
   ═══════════════════════════════════════════════════════════════════ */

.rvc-tabs{
  display:flex;gap:4px;background:var(--off);border-radius:var(--rsm);
  padding:3px;margin-bottom:16px;width:fit-content;flex-wrap:wrap;
}
.rvc-tab{
  padding:7px 18px;font-size:11.5px;font-weight:700;font-family:inherit;
  border:none;border-radius:calc(var(--rsm) - 2px);background:none;
  color:var(--muted);cursor:pointer;transition:all .14s;white-space:nowrap;
}
.rvc-tab:hover{color:var(--blue);}
.rvc-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}

/* Kop van de vergadering */
.rvc-hero{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:28px;flex-wrap:wrap;
  background:var(--dark);color:#fff;border-radius:var(--r);
  padding:24px 28px;margin-bottom:18px;
}
.rvc-hero-links{min-width:0;flex:1;}
.rvc-hero-eyebrow{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.55);margin-bottom:8px;
}
.rvc-hero-titel{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;}
.rvc-hero-sub{
  font-size:12px;color:rgba(255,255,255,.7);margin-top:8px;
  line-height:1.65;max-width:64ch;
}
.rvc-hero-raad{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0;}

/* Commissaris-avatars */
.rvc-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  color:#fff;font-size:9px;font-weight:700;letter-spacing:.04em;
  flex-shrink:0;
}
.rvc-avatar-sm{width:32px;height:32px;font-size:9.5px;}
.rvc-avatar-xs{width:20px;height:20px;font-size:7px;}
.rvc-lid{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.rvc-lid-naam{font-size:11px;font-weight:700;color:var(--muted);}

/* Agendapunten */
.rvc-agenda{display:flex;flex-direction:column;gap:12px;}
.rvc-punt{
  background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--border);border-radius:var(--r);
  padding:20px 24px;
}
.rvc-punt.rvc-hoog{border-left-color:var(--danger);}
.rvc-punt.rvc-midden{border-left-color:var(--warning);}
.rvc-punt.rvc-laag{border-left-color:var(--success);}
.rvc-punt-kop{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px;}
.rvc-nr{
  font-size:15px;font-weight:700;color:var(--border);
  font-variant-numeric:tabular-nums;line-height:1.2;flex-shrink:0;
}
.rvc-punt-kop-txt{flex:1;min-width:0;}
.rvc-punt-kop-txt h3{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:7px;}
.rvc-urg{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:2px 9px;border-radius:20px;
}
.rvc-urg-hoog{background:var(--danger-bg);color:var(--danger);}
.rvc-urg-midden{background:var(--warning-bg);color:var(--warning);}
.rvc-urg-laag{background:var(--success-bg);color:var(--success);}
.rvc-punt-txt{
  font-size:12.5px;line-height:1.7;color:var(--black);
  max-width:70ch;margin:0;
}

/* Cijferblok onder een punt of standpunt */
.rvc-cijfers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px 24px;margin-top:14px;padding-top:13px;border-top:1px solid var(--border);
}
.rvc-cijfer{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:11.5px;padding-bottom:4px;border-bottom:1px dotted var(--border);
}
.rvc-cijfer span{color:var(--muted);}
.rvc-cijfer strong{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* Balk boven besluiten */
.rvc-balk{
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;margin-bottom:16px;
}
.rvc-balk-titel{font-size:15px;font-weight:700;}
.rvc-balk-sub{font-size:12px;color:var(--muted);margin-top:3px;max-width:62ch;line-height:1.6;}

/* Besluiten */
.rvc-lijst{display:flex;flex-direction:column;gap:12px;}
.rvc-besluit{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
}
.rvc-besluit-kop{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:22px;padding:18px 22px;cursor:pointer;flex-wrap:wrap;
}
.rvc-besluit-af .rvc-besluit-kop{cursor:default;}
.rvc-besluit-kop-txt{flex:1;min-width:0;}
.rvc-besluit-kop-txt h3{font-size:15px;font-weight:700;line-height:1.35;margin:5px 0 0;}
.rvc-type{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);background:var(--off);padding:3px 9px;border-radius:20px;
}
.rvc-besluit-klant{font-size:11.5px;color:var(--muted);display:block;margin-top:5px;}
.rvc-besluit-advies{text-align:right;flex-shrink:0;}
.rvc-oordeel{display:block;font-size:12.5px;font-weight:700;line-height:1.4;}
.rvc-stemmen{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;}

.rvc-context{
  font-size:12.5px;line-height:1.7;color:var(--muted);
  padding:0 22px 14px;margin:0;max-width:70ch;font-style:italic;
}

/* Standpunten van de commissarissen */
.rvc-standpunten{border-top:1px solid var(--border);}
.rvc-standpunt{padding:18px 22px;border-bottom:1px solid var(--border);}
.rvc-standpunt:last-child{border-bottom:none;}
.rvc-badge{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:3px 10px;border-radius:20px;
}
.rvc-kern{font-size:13px;line-height:1.65;margin:10px 0 0;max-width:70ch;font-weight:600;}
.rvc-vraag{
  font-size:12px;line-height:1.6;color:var(--blue);
  margin:12px 0 0;padding-top:11px;border-top:1px dashed var(--border);
  max-width:70ch;
}

.rvc-voorwaarden{
  background:var(--off);padding:16px 22px;border-top:1px solid var(--border);
}
.rvc-voorwaarden-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:9px;
}
.rvc-voorwaarden ul{margin:0;padding-left:18px;}
.rvc-voorwaarden li{font-size:12px;line-height:1.65;margin-bottom:5px;max-width:70ch;}

.rvc-acties{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:14px 22px;border-top:1px solid var(--border);background:var(--off);
}

/* Terugblik */
.rvc-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:16px;
}
.rvc-kpi{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;
}
.rvc-kpi-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:6px;
}
.rvc-kpi-val{font-size:21px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.rvc-kpi-sub{font-size:10.5px;color:var(--muted);margin-top:4px;}

.rvc-keuze{
  display:inline-block;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:3px 11px;border-radius:20px;
}
.rvc-keuze-doorgegaan{background:var(--blue-light);color:var(--blue);}
.rvc-keuze-aangepast{background:var(--warning-bg);color:var(--warning);}
.rvc-keuze-afgezien{background:var(--off);color:var(--muted);}

.rvc-mini{
  display:flex;gap:14px;flex-wrap:wrap;
  padding:0 22px 16px;
}
.rvc-mini-lid{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;
}
.rvc-uitkomst{
  font-size:12.5px;line-height:1.7;
  padding:14px 22px;border-top:1px solid var(--border);
  background:var(--blue-light);max-width:none;
}

.rvc-leeg{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:34px 26px;text-align:center;
  color:var(--muted);font-size:12.5px;line-height:1.7;
}

@media(max-width:768px){
  .rvc-tabs{width:100%;}
  .rvc-tab{flex:1;padding:9px 8px;font-size:11px;}
  .rvc-hero{padding:18px 20px;gap:16px;}
  .rvc-hero-titel{font-size:16px;}
  .rvc-punt{padding:16px 18px;}
  .rvc-punt-kop{gap:10px;}
  .rvc-cijfers{grid-template-columns:1fr;gap:7px;}
  .rvc-besluit-kop{padding:16px 18px;gap:12px;}
  .rvc-besluit-advies{text-align:left;}
  .rvc-standpunt{padding:16px 18px;}
  .rvc-acties{padding:12px 18px;}
  .rvc-acties button{flex:1;min-width:130px;}
  .rvc-context,.rvc-mini{padding-left:18px;padding-right:18px;}
  .rvc-uitkomst,.rvc-voorwaarden{padding:14px 18px;}
  .rvc-kpis{grid-template-columns:repeat(2,1fr);}
}

/* ── Kosten (binnen Financiën) ── */
.kost-saldo{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;padding:16px 20px;
}
.kost-saldo-titel{font-size:13px;font-weight:700;}
.kost-saldo-sub{font-size:11.5px;color:var(--muted);margin-top:3px;max-width:56ch;line-height:1.6;}
.kost-saldo-velden{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.kost-saldo-velden input{
  padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--rsm);
  font-size:13px;font-family:inherit;outline:none;background:var(--white);
  min-width:130px;
}
.kost-saldo-velden input:focus{border-color:var(--blue);}

/* ── Precedenten in een besluit ── */
.rvc-precedent{
  background:var(--blue-light);padding:16px 22px;
  border-top:1px solid var(--border);
}
.rvc-precedent-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--blue);margin-bottom:9px;
}
.rvc-precedent-waarschuwing{
  font-size:12.5px;line-height:1.65;font-weight:600;
  margin:0 0 10px;max-width:70ch;
}
.rvc-precedent ul{margin:0;padding-left:18px;}
.rvc-precedent li{font-size:12px;line-height:1.65;margin-bottom:6px;max-width:70ch;}

@media(max-width:640px){
  .kost-saldo{padding:14px 16px;}
  .kost-saldo-velden{width:100%;}
  .kost-saldo-velden input{flex:1;min-width:0;}
  .kost-saldo-velden button{width:100%;}
  .rvc-precedent{padding:14px 18px;}
}

/* Tabrij van Rentabiliteit: met de raad erbij zijn het vijf knoppen.
   Op telefoon horizontaal scrollend in plaats van omklappen. */
@media(max-width:768px){
  .rent-tabs{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%;scrollbar-width:none;
  }
  .rent-tabs::-webkit-scrollbar{display:none;}
  .rent-tabs button{flex-shrink:0;min-height:40px;}
}

/* ═══ ZWEVENDE MENUKNOP ═══
   Eén hamburger linksboven is op een telefoon te fragiel: zodra je
   gescrold bent of in een detailweergave zit, is menutoegang ver weg.
   Deze knop staat vast op duimhoogte en is altijd zichtbaar. */
#mob-fab-menu{display:none;}
@media(max-width:768px){
  #mob-fab-menu{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:52px;height:52px;border-radius:50%;
    background:var(--dark);color:#fff;border:none;cursor:pointer;
    box-shadow:0 6px 18px rgba(30,30,46,.38);
    z-index:190;
    transition:transform .18s,opacity .18s;
  }
  #mob-fab-menu:active{transform:scale(.92);}
  /* Weg zodra het menu zelf open is */
  body.mob-menu-open #mob-fab-menu{opacity:0;pointer-events:none;}
}

/* ═══ RAAD — VISUEEL ONTWERP ═══ */
.rvc-portret{display:block;flex-shrink:0;border-radius:50%;}

/* Hero als raadskamer: donker paneel met gloed en de bank */
.rvc-hero{
  background:
    radial-gradient(circle at 88% 115%, rgba(60,191,240,.28) 0%, rgba(60,191,240,0) 55%),
    radial-gradient(circle at -5% -30%, rgba(60,191,240,.14) 0%, rgba(60,191,240,0) 45%),
    var(--dark);
  position:relative;overflow:hidden;
}
.rvc-hero::before{
  content:'⚖';position:absolute;right:26px;top:14px;
  font-size:64px;line-height:1;color:rgba(255,255,255,.06);
  pointer-events:none;
}
.rvc-bank{
  display:flex;gap:14px;flex-shrink:0;align-items:flex-end;
  padding:10px 14px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);
}
.rvc-bank-lid{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:default;transition:transform .16s;
}
.rvc-bank-lid:hover{transform:translateY(-3px);}
.rvc-bank-lid .rvc-portret{box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.rvc-bank-naam{
  font-size:8px;font-weight:700;letter-spacing:.1em;
  color:rgba(255,255,255,.65);
}

/* Profielkaarten: wie let waarop */
.rvc-profielen{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:12px;margin-bottom:18px;
}
.rvc-profiel{
  background:var(--white);border:1px solid var(--border);
  border-top:3px solid var(--border);border-radius:var(--r);
  padding:16px 16px 14px;display:flex;flex-direction:column;
}
.rvc-profiel-kop{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.rvc-profiel-naam{font-size:12.5px;font-weight:700;line-height:1.25;}
.rvc-profiel-focus{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.45;}
.rvc-profiel-let{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:7px;
}
.rvc-profiel-lijst{list-style:none;margin:0 0 12px;padding:0;flex:1;}
.rvc-profiel-lijst li{
  display:flex;align-items:baseline;gap:7px;
  font-size:11px;line-height:1.5;margin-bottom:6px;color:var(--black);
}
.rvc-stip{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  position:relative;top:-1px;
}
.rvc-profiel-motto{
  font-size:10.5px;font-weight:700;font-style:italic;line-height:1.45;
  padding-top:10px;border-top:1px dashed var(--border);
}

/* Standpunten dragen de lidkleur al via inline border; wat lucht erbij */
.rvc-standpunt{padding-left:20px;}

@media(max-width:1180px){
  .rvc-profielen{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
  /* Profielen als horizontale strook, één veeg langs de hele raad */
  .rvc-profielen{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:10px;margin:0 -1rem 16px;padding:0 1rem 6px;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .rvc-profielen::-webkit-scrollbar{display:none;}
  .rvc-profiel{min-width:230px;scroll-snap-align:start;}
  .rvc-hero{flex-direction:column;}
  .rvc-hero::before{font-size:44px;right:16px;top:10px;}
  .rvc-bank{
    width:100%;justify-content:space-between;gap:6px;
    padding:10px 12px;box-sizing:border-box;
  }
  .rvc-bank-lid .rvc-portret{width:40px;height:40px;}
}

/* ═══════════════════════════════════════════════════════════════════
   VANDAAG — PERSOONLIJKE ASSISTENT
   Rustige dagweergave: lucht, grote begroeting, en per kaart één
   duidelijke taak. Zakelijk en persoonlijk staan naast elkaar.
   ═══════════════════════════════════════════════════════════════════ */

/* Tabrij van Weekstart */
.ws-tabs{
  display:flex;gap:4px;background:var(--off);border-radius:var(--rsm);
  padding:3px;width:fit-content;margin-bottom:16px;
}
.ws-tab{
  padding:8px 20px;font-size:11.5px;font-weight:700;font-family:inherit;
  border:none;border-radius:calc(var(--rsm) - 2px);background:none;
  color:var(--muted);cursor:pointer;transition:all .14s;
}
.ws-tab:hover{color:var(--blue);}
.ws-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}

/* Kop */
.vd-kop{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:28px;flex-wrap:wrap;margin-bottom:18px;
}
.vd-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.vd-datum{font-size:12px;color:var(--muted);font-weight:600;}
.vd-klok{
  font-size:11.5px;font-weight:700;color:var(--dark);
  background:var(--white);border:1px solid var(--border);
  padding:4px 12px;border-radius:20px;font-variant-numeric:tabular-nums;
}
.vd-groet{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;}
.vd-cijfers{display:flex;gap:26px;flex-shrink:0;}
.vd-cijfer{text-align:center;}
.vd-cijfer-val{
  font-size:26px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.vd-cijfer-lbl{
  font-size:9.5px;color:var(--muted);margin-top:5px;
  text-transform:lowercase;letter-spacing:.02em;
}

/* Dagcheck-in */
.vd-checkin{
  background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--blue);border-radius:var(--r);
  padding:16px 20px;margin-bottom:14px;
}
.vd-checkin-af{border-left-color:var(--success);background:var(--success-bg);}
.vd-checkin-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);display:block;margin-bottom:9px;
}
.vd-checkin-rij{display:flex;gap:8px;}
.vd-checkin-rij input{
  flex:1;min-width:0;padding:10px 13px;font-size:13.5px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--rsm);
  outline:none;background:var(--white);
}
.vd-checkin-rij input:focus{border-color:var(--blue);}

/* Rooster */
/* Bovenste rij: agenda, taken en de smalle kolom met thema en doelen.
   Onderste rij staat in een eigen rooster (.vd-onder) dat zich naar de
   paginabreedte voegt; anders bleef de laatste kaart alleen links staan
   met de halve pagina leeg ernaast. */
.vd-grid{
  display:grid;grid-template-columns:1.35fr 1.15fr .85fr;
  gap:14px;align-items:start;
}
.vd-onder{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;align-items:start;
}
/* Staat de laatste kaart alleen op een rij, dan vult hij de rij.
   Zonder deze regel bleef er een lege helft naast staan. */
.vd-onder > *:last-child:nth-child(odd){grid-column:1 / -1;}
@media(min-width:1400px){
  .vd-onder{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vd-onder > *:last-child:nth-child(odd){grid-column:auto;}
  /* Bij twee kaarten vult de tweede de resterende twee kolommen. */
  .vd-onder > *:last-child:nth-child(2){grid-column:span 2;}
}
.vd-kaart{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:20px 22px;
}
.vd-kaart-kop{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px;
}
.vd-kaart-kop h3{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.vd-telling{
  font-size:11px;font-weight:700;color:var(--muted);
  background:var(--off);padding:2px 9px;border-radius:20px;
}
.vd-kaart-sub{font-size:11px;color:var(--muted);margin-left:auto;}
.vd-leeg{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0;}
.vd-leeg-donker{color:rgba(255,255,255,.55);}

/* Tijdlijn van vandaag */
.vd-tijdlijn{display:flex;flex-direction:column;}
.vd-blok{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px dotted var(--border);
}
.vd-blok:last-child{border-bottom:none;}
.vd-blok-af{opacity:.5;}
.vd-blok-tijd{
  font-size:12px;font-weight:700;color:var(--blue);
  font-variant-numeric:tabular-nums;flex-shrink:0;width:42px;
}
.vd-blok-body{flex:1;min-width:0;}
.vd-blok-titel{
  font-size:13px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vd-blok-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.vd-blok-tot{font-size:10.5px;color:var(--muted);flex-shrink:0;}

/* Takenkaart in het donker */
.vd-kaart-taken{background:var(--dark);border-color:var(--dark);color:#fff;}
.vd-kaart-taken h3{color:#fff;}
.vd-kaart-taken .vd-telling{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75);}
.vd-taken{display:flex;flex-direction:column;}
.vd-taak{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.vd-taak:last-child{border-bottom:none;}
.vd-taak-vink{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;
  border:1.6px solid rgba(255,255,255,.35);background:none;
  cursor:pointer;margin-top:1px;transition:all .15s;
}
.vd-taak-vink:hover{border-color:var(--blue);background:rgba(60,191,240,.18);}
.vd-taak-body{flex:1;min-width:0;}
.vd-taak-titel{font-size:12.5px;font-weight:600;line-height:1.4;}
.vd-taak-meta{
  display:flex;gap:10px;flex-wrap:wrap;
  font-size:10.5px;color:rgba(255,255,255,.5);margin-top:4px;
}
.vd-laat{color:#ff8b8b;font-weight:700;}
.vd-nu{color:var(--blue);font-weight:700;}
.vd-voortgang{display:flex;align-items:center;gap:8px;margin-top:8px;}
.vd-voortgang-baan{
  flex:1;height:3px;background:rgba(255,255,255,.14);
  border-radius:2px;overflow:hidden;
}
.vd-voortgang-deel{height:100%;background:var(--success);border-radius:2px;}
.vd-voortgang span{font-size:9.5px;color:rgba(255,255,255,.5);font-weight:700;}
.vd-taak-fase{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.1);
  padding:3px 8px;border-radius:20px;flex-shrink:0;
}
.vd-meer{
  width:100%;margin-top:14px;padding:9px;font-size:11px;font-weight:700;
  font-family:inherit;background:rgba(255,255,255,.1);color:#fff;
  border:none;border-radius:var(--rsm);cursor:pointer;transition:background .15s;
}
.vd-meer:hover{background:rgba(255,255,255,.18);}

/* Rechterkolom */
.vd-kolom{display:flex;flex-direction:column;gap:14px;}

/* Maandthema — het gele accent uit het voorbeeld */
.vd-kaart-thema{background:#ffd84d;border-color:#ffd84d;}
.vd-thema-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(30,30,46,.55);margin-bottom:8px;
}
.vd-thema-tekst{font-size:17px;font-weight:700;line-height:1.25;color:var(--dark);}
.vd-thema-edit{
  margin-top:12px;padding:5px 12px;font-size:10.5px;font-weight:700;
  font-family:inherit;background:rgba(30,30,46,.1);color:var(--dark);
  border:none;border-radius:20px;cursor:pointer;
}
.vd-thema-rij{display:flex;gap:6px;}
.vd-thema-rij input{
  flex:1;min-width:0;padding:8px 11px;font-size:12.5px;font-family:inherit;
  border:1.5px solid rgba(30,30,46,.18);border-radius:var(--rsm);
  outline:none;background:rgba(255,255,255,.6);
}
.vd-thema-rij button{
  padding:8px 14px;font-size:11.5px;font-weight:700;font-family:inherit;
  background:var(--dark);color:#fff;border:none;border-radius:var(--rsm);cursor:pointer;
}

/* Doelen */
.vd-plus{
  margin-left:auto;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--white);
  color:var(--muted);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.vd-plus:hover{border-color:var(--blue);color:var(--blue);}
.vd-doelen{list-style:none;margin:0;padding:0;}
.vd-doel{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;border-bottom:1px dotted var(--border);
}
.vd-doel:last-child{border-bottom:none;}
.vd-doel-nr{
  font-size:10px;font-weight:700;color:var(--blue);
  font-variant-numeric:tabular-nums;flex-shrink:0;padding-top:2px;
}
.vd-doel-tekst{flex:1;font-size:12.5px;line-height:1.5;cursor:pointer;}
.vd-doel-af .vd-doel-tekst{text-decoration:line-through;color:var(--muted);}
.vd-doel-af .vd-doel-nr{color:var(--muted);}
.vd-doel-x{
  background:none;border:none;color:var(--border);font-size:16px;
  cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0;
}
.vd-doel-x:hover{color:var(--danger);}

/* Mijn lijst */
.vd-filters{display:flex;gap:3px;margin-left:auto;background:var(--off);border-radius:20px;padding:2px;}
.vd-filter{
  padding:4px 11px;font-size:10px;font-weight:700;font-family:inherit;
  border:none;border-radius:20px;background:none;color:var(--muted);cursor:pointer;
}
.vd-filter-on{background:var(--white);color:var(--blue);}
.vd-toevoeg{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;}
.vd-toevoeg input{
  flex:1;min-width:150px;padding:9px 12px;font-size:12.5px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--rsm);outline:none;
}
.vd-toevoeg input:focus{border-color:var(--blue);}
.vd-toevoeg select{
  padding:9px 10px;font-size:12px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--rsm);
  background:var(--white);outline:none;cursor:pointer;
}
.vd-items{display:flex;flex-direction:column;}
.vd-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 0;border-bottom:1px dotted var(--border);
}
.vd-item:last-child{border-bottom:none;}
.vd-item-vink{
  width:17px;height:17px;border-radius:5px;flex-shrink:0;
  border:1.6px solid var(--border);background:var(--white);cursor:pointer;
  transition:all .15s;
}
.vd-item-vink:hover{border-color:var(--blue);}
.vd-item-af .vd-item-vink{background:var(--success);border-color:var(--success);}
.vd-item-tekst{flex:1;font-size:12.5px;line-height:1.45;min-width:0;}
.vd-item-af .vd-item-tekst{text-decoration:line-through;color:var(--muted);}
.vd-item-soort{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:20px;flex-shrink:0;
}
.vd-soort-zakelijk{background:var(--blue-light);color:var(--blue);}
.vd-soort-prive{background:#f3e8ff;color:#7c3aed;}
.vd-item-x{
  background:none;border:none;color:var(--border);font-size:16px;
  cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0;
}
.vd-item-x:hover{color:var(--danger);}

/* Vraagt aandacht */
.vd-aandacht{display:flex;flex-direction:column;gap:12px;}
.vd-aandacht-rij{display:flex;align-items:center;gap:13px;}
.vd-aandacht-nr{
  width:30px;height:30px;border-radius:var(--rsm);flex-shrink:0;
  background:var(--warning-bg);color:var(--warning);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;
}
.vd-aandacht-rij strong{font-size:12.5px;font-weight:700;display:block;}
.vd-aandacht-rij span{font-size:11px;color:var(--muted);display:block;margin-top:2px;}

@media(max-width:1180px){
  .vd-grid{grid-template-columns:1fr 1fr;}
  .vd-kolom{grid-column:span 2;flex-direction:row;}
  .vd-kolom>*{flex:1;}
}
@media(max-width:768px){
  .ws-tabs{width:100%;}
  .ws-tab{flex:1;padding:10px 8px;}
  .vd-grid,.vd-onder{grid-template-columns:1fr;}
  .vd-kolom{grid-column:span 1;}
  .vd-kolom{flex-direction:column;}
  .vd-kop{align-items:flex-start;gap:16px;}
  .vd-groet{font-size:24px;}
  .vd-cijfers{gap:0;justify-content:space-between;width:100%;}
  .vd-cijfer-val{font-size:22px;}
  .vd-kaart{padding:16px 18px;}
  .vd-checkin-rij{flex-direction:column;}
  .vd-checkin-rij button{width:100%;}
  .vd-toevoeg input{min-width:0;flex-basis:100%;}
  .vd-toevoeg select,.vd-toevoeg button{flex:1;}
  .vd-filters{width:100%;margin:8px 0 0;justify-content:space-between;}
  .vd-filter{flex:1;}
  .vd-blok-titel{white-space:normal;}
}

/* ═══ VANDAAG — DE HELPENDE LAAG ═══
   Het advies staat visueel boven alles; de opsomming komt daarna. */

.vd-advies{
  background:var(--dark);color:#fff;border-radius:var(--r);
  padding:22px 26px;margin-bottom:12px;position:relative;overflow:hidden;
}
.vd-advies::after{
  content:'';position:absolute;right:-60px;top:-60px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(60,191,240,.22) 0%,rgba(60,191,240,0) 70%);
  pointer-events:none;
}
.vd-advies-leeg{background:var(--white);color:var(--black);border:1px solid var(--border);}
.vd-advies-leeg .vd-advies-lbl{color:var(--muted);}
.vd-advies-kop{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:10px;
}
.vd-advies-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--blue);
}
.vd-reeks{
  font-size:9.5px;font-weight:700;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.1);padding:3px 10px;border-radius:20px;
}
.vd-advies-titel{
  font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.02em;
  max-width:38ch;
}
.vd-advies-titel-rustig{font-size:15px;font-weight:600;line-height:1.55;max-width:60ch;}
.vd-advies-waarom{
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.7);
  margin:8px 0 0;max-width:60ch;
}
.vd-advies-leeg .vd-advies-waarom{color:var(--muted);}
.vd-advies-vg{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:340px;}
.vd-advies-vg-baan{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;}
.vd-advies-vg-deel{height:100%;background:var(--success);border-radius:2px;}
.vd-advies-vg span{font-size:10px;color:rgba(255,255,255,.55);font-weight:700;white-space:nowrap;}
.vd-advies-acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.vd-advies-acties .btn-ghost{
  background:rgba(255,255,255,.1);color:#fff;border:none;
}
.vd-advies-acties .btn-ghost:hover{background:rgba(255,255,255,.18);}
.vd-weg{
  padding:10px 14px;font-size:11.5px;font-weight:700;font-family:inherit;
  background:none;color:rgba(255,255,255,.45);border:none;
  cursor:pointer;border-radius:var(--rsm);transition:color .15s;
}
.vd-weg:hover{color:#ff8b8b;}

/* Alternatieven */
.vd-alt{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.11);
}
.vd-alt-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.4);
}
.vd-alt-knop{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 13px;font-size:11.5px;font-weight:600;font-family:inherit;
  background:rgba(255,255,255,.08);color:#fff;border:none;
  border-radius:20px;cursor:pointer;transition:background .15s;
  text-align:left;max-width:100%;
}
.vd-alt-knop:hover{background:rgba(255,255,255,.16);}
.vd-alt-knop em{font-style:normal;font-size:9.5px;color:rgba(255,255,255,.5);white-space:nowrap;}

/* De rekening van de dag */
.vd-rekening{
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--success);
  border-radius:var(--r);padding:14px 20px;margin-bottom:12px;
}
.vd-rekening-vol{border-left-color:var(--warning);background:var(--warning-bg);}
.vd-rekening-tekst{font-size:12.5px;line-height:1.6;flex:1;min-width:0;max-width:76ch;}
.vd-rekening-rechts{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.vd-week{font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap;}
.vd-afsluit{
  padding:8px 15px;font-size:11px;font-weight:700;font-family:inherit;
  background:var(--off);color:var(--dark);border:1.5px solid var(--border);
  border-radius:var(--rsm);cursor:pointer;white-space:nowrap;transition:all .15s;
}
.vd-afsluit:hover{border-color:var(--blue);color:var(--blue);}

/* Ritmesignaal */
.vd-ritme{
  font-size:12px;line-height:1.6;color:var(--muted);
  padding:0 4px 14px;max-width:80ch;
}
.vd-ritme strong{color:var(--black);}

/* Blijft liggen */
.vd-kaart-liggen{border-left:3px solid var(--warning);}
.vd-liggen-uitleg{
  font-size:11.5px;color:var(--muted);line-height:1.6;
  margin:0 0 13px;max-width:64ch;
}
.vd-liggen-lijst{display:flex;flex-direction:column;}
.vd-liggen{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px dotted var(--border);
}
.vd-liggen:last-child{border-bottom:none;}
.vd-liggen-body{flex:1;min-width:0;}
.vd-liggen-tekst{font-size:12.5px;font-weight:600;line-height:1.4;}
.vd-liggen-reden{font-size:10.5px;color:var(--warning);font-weight:600;margin-top:3px;}
.vd-liggen-acties{display:flex;gap:6px;flex-shrink:0;}
.vd-aandacht-btn{margin-left:auto;flex-shrink:0;}

@media(max-width:768px){
  .vd-advies{padding:18px 18px;}
  .vd-advies-titel{font-size:17px;}
  .vd-advies-acties{gap:6px;}
  .vd-advies-acties button{flex:1;min-width:calc(50% - 3px);}
  .vd-weg{min-width:100%;}
  .vd-alt{flex-direction:column;align-items:stretch;}
  .vd-alt-knop{justify-content:space-between;}
  .vd-rekening{padding:14px 16px;}
  .vd-rekening-rechts{width:100%;justify-content:space-between;}
  .vd-afsluit{flex:1;}
  .vd-liggen{flex-wrap:wrap;}
  .vd-liggen-acties{width:100%;}
  .vd-liggen-acties button{flex:1;}
}

/* ═══════════════════════════════════════════════════════════════════
   PROJECTOVERZICHT — kaarten en tijdlijn
   Eén kaart per project met alles bij elkaar, in plaats van een brede
   tabel die je op telefoon moet wegscrollen.
   ═══════════════════════════════════════════════════════════════════ */

.po-balk{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
.po-filters,.po-views{display:flex;gap:3px;background:var(--off);border-radius:20px;padding:3px;}
.po-views{align-items:center;background:none;padding:0;gap:6px;}
.po-filter,.po-view{
  padding:6px 14px;font-size:11px;font-weight:700;font-family:inherit;
  border:none;border-radius:20px;background:none;color:var(--muted);cursor:pointer;
  transition:all .14s;white-space:nowrap;
}
.po-filter:hover,.po-view:hover{color:var(--blue);}
.po-filter-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.07);}
.po-view{background:var(--off);border:1.5px solid transparent;}
.po-view-on{background:var(--white);border-color:var(--blue);color:var(--blue);}

/* Kaarten */
.po-kaarten{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;
}
.po-kaart{
  background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--border);border-radius:var(--r);
  padding:16px 18px;display:flex;flex-direction:column;
}
.po-kaart.po-laat{border-left-color:var(--danger);}
.po-kaart.po-risico{border-left-color:var(--warning);}
.po-kaart.po-wacht{border-left-color:var(--blue);}
.po-kaart.po-ok{border-left-color:var(--success);}
.po-kaart.po-af{opacity:.55;}

.po-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;cursor:pointer;}
.po-kop-txt{flex:1;min-width:0;}
.po-klant{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:4px;
}
.po-naam{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;}
.po-kop-rechts{flex-shrink:0;text-align:right;}
.po-volgend{
  background:var(--off);border-radius:var(--rsm);padding:5px 10px;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
}
.po-volgend-laat{background:var(--danger-bg);}
.po-volgend-lbl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.po-volgend-datum{font-size:12px;font-weight:700;white-space:nowrap;}
.po-volgend-laat .po-volgend-datum{color:var(--danger);}
.po-geen-datum{font-size:10.5px;color:var(--border);font-weight:600;}

/* Fasestappen met eigen datum */
.po-stappen{
  display:flex;gap:2px;margin:14px 0 12px;
  padding-top:12px;border-top:1px solid var(--border);
}
.po-stap{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  position:relative;
}
.po-stap::before{
  content:'';position:absolute;top:5px;left:-50%;width:100%;height:1.5px;
  background:var(--border);z-index:0;
}
.po-stap:first-child::before{display:none;}
.po-stap-klaar::before{background:var(--success);}
.po-stap-bol{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;z-index:1;
  background:var(--white);border:2px solid var(--border);
}
.po-stap-klaar .po-stap-bol{background:var(--success);border-color:var(--success);}
.po-stap-bezig .po-stap-bol{
  background:var(--blue);border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-light);
}
.po-stap-laat .po-stap-bol{background:var(--danger);border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg);}
.po-stap-naam{
  font-size:8.5px;font-weight:700;color:var(--muted);text-align:center;
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.po-stap-bezig .po-stap-naam{color:var(--blue);}
.po-stap-klaar .po-stap-naam{color:var(--success);}
.po-stap-datum{font-size:8px;color:var(--muted);font-variant-numeric:tabular-nums;}
.po-stap-laat .po-stap-datum{color:var(--danger);font-weight:700;}

.po-cijfers{
  display:flex;gap:6px;flex-wrap:wrap;
  font-size:10px;color:var(--muted);
}
.po-cijfers span{
  background:var(--off);padding:3px 9px;border-radius:20px;font-weight:600;
}
.po-offerte-geaccepteerd{background:var(--success-bg)!important;color:var(--success)!important;}
.po-offerte-verzonden{background:var(--warning-bg)!important;color:var(--warning)!important;}

/* Blokkades */
.po-blok{display:flex;flex-direction:column;gap:5px;margin-top:11px;}
.po-blok-rij{
  font-size:11px;line-height:1.45;padding:6px 10px;border-radius:var(--rsm);
  font-weight:600;
}
.po-blok-laat{background:var(--danger-bg);color:var(--danger);}
.po-blok-risico{background:var(--warning-bg);color:var(--warning);}
.po-blok-wacht{background:var(--blue-light);color:var(--blue);}
.po-blok-geld{background:var(--warning-bg);color:var(--warning);}

.po-detail{margin-top:13px;padding-top:13px;border-top:1px solid var(--border);}
.po-desc{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 10px;}
.po-fase-notitie{font-size:11.5px;line-height:1.55;margin-bottom:6px;}
.po-fase-notitie strong{color:var(--blue);}
.po-acties{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}

.po-leeg{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  padding:32px 24px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.65;
}

/* ── Tijdlijn ── */
.po-tijdlijn{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:16px 18px;overflow-x:auto;
}
.po-tl-kop{display:flex;gap:10px;margin-bottom:10px;min-width:640px;}
.po-tl-naamkolom{width:150px;flex-shrink:0;}
.po-tl-schaal{flex:1;display:flex;}
.po-tl-week{
  flex:1;font-size:8.5px;color:var(--muted);font-weight:700;
  text-align:left;padding-left:3px;border-left:1px solid var(--border);
  overflow:hidden;white-space:nowrap;
}
.po-tl-nu{color:var(--blue);border-left-color:var(--blue);}
.po-tl-rijen{display:flex;flex-direction:column;gap:3px;min-width:640px;}
.po-tl-rij{
  display:flex;gap:10px;align-items:center;padding:7px 0;cursor:pointer;
  border-radius:var(--rsm);transition:background .14s;
}
.po-tl-rij:hover{background:var(--off);}
.po-tl-naam{
  font-size:11.5px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.po-tl-klant{font-size:9.5px;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.po-tl-baan{flex:1;position:relative;height:22px;}
.po-tl-lijn{
  position:absolute;top:0;bottom:0;width:1px;background:var(--border);
}
.po-tl-lijn-nu{background:var(--blue);opacity:.4;}
.po-tl-balk{
  position:absolute;top:8px;height:6px;border-radius:3px;
  background:var(--blue-light);
}
.po-tl-punt{
  position:absolute;top:5px;width:12px;height:12px;border-radius:50%;
  transform:translateX(-50%);
  background:var(--white);border:2px solid var(--muted);
}
.po-tl-punt-klaar{background:var(--success);border-color:var(--success);}
.po-tl-punt-bezig{background:var(--blue);border-color:var(--blue);}
.po-tl-punt-laat{background:var(--danger);border-color:var(--danger);}
.po-tl-zonder{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--border);
  font-size:11.5px;line-height:1.6;
}
.po-tl-zonder strong{display:block;margin-bottom:3px;}
.po-tl-zonder span{color:var(--muted);}

/* Fasedatums in het projectformulier.
   Het tekstveld staat buiten .mf, dus de breedte- en randregels van
   .mf input gelden er niet automatisch voor. Zonder deze regels valt
   het veel smaller uit dan de rest van het formulier. */
.pf-fase{margin-bottom:10px;}
.pf-fase-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;}
.pf-fase-kop label{
  font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:.07em;text-transform:uppercase;
}
.pf-fase-kop input[type=date]{
  width:132px;flex-shrink:0;padding:6px 10px;
  font-size:11.5px;font-family:inherit;color:var(--black);
  border:1.5px solid var(--border);border-radius:var(--rsm);
  background:var(--white);outline:none;transition:border-color .15s;
}
.pf-fase-kop input[type=date]:focus{border-color:var(--blue);}
.pf-fase textarea{
  display:block;width:100%;min-height:48px;resize:vertical;
  padding:9px 12px;font-size:12.5px;font-family:inherit;color:var(--black);
  border:1.5px solid var(--border);border-radius:var(--rsm);
  background:var(--white);outline:none;transition:border-color .15s;
}
.pf-fase textarea:focus{border-color:var(--blue);}

@media(max-width:768px){
  .po-balk{flex-direction:column;align-items:stretch;}
  .po-filters{width:100%;overflow-x:auto;scrollbar-width:none;}
  .po-filters::-webkit-scrollbar{display:none;}
  .po-filter{flex:1;white-space:nowrap;}
  .po-views{width:100%;}
  .po-view{flex:1;}
  .po-views .btn-blue{flex:1;}
  .po-kaarten{grid-template-columns:1fr;}
  .po-stap-naam{font-size:7.5px;}
  .po-stap-datum{font-size:7.5px;}
  .po-tijdlijn{padding:14px 12px;}
  .po-tl-naamkolom{width:110px;}
}

/* ═══ OFFERTEMODAL — soorten en extra velden ═══
   Volgt de bestaande modalopmaak: labels in kleinkapitaal, velden met
   dezelfde hoogte, randen en radius als .mf input. */

/* Optioneel-hint achter een label */
.mf-opt{color:var(--muted);font-weight:400;font-size:10px;text-transform:none;letter-spacing:0;}

/* Soortkeuze */
.of-soorten{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1rem;
}
.of-soort{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:11px 13px;font-family:inherit;cursor:pointer;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--rsm);transition:all .14s;
}
.of-soort:hover{border-color:var(--blue);}
.of-soort-on{
  border-color:var(--blue);background:var(--blue-light);
  box-shadow:inset 0 0 0 1px var(--blue);
}
.of-soort-naam{font-size:12.5px;font-weight:700;color:var(--black);}
.of-soort-on .of-soort-naam{color:var(--blue);}
.of-soort-uitleg{font-size:10px;color:var(--muted);line-height:1.4;}

/* Hint- en rekenregels */
.of-hint{
  font-size:11.5px;color:var(--muted);line-height:1.55;
  background:var(--off);border-radius:var(--rsm);
  padding:9px 12px;margin-bottom:12px;
}
.of-hint strong{color:var(--black);}
.of-hint-waarschuwing{background:var(--warning-bg);color:var(--warning);}
.of-hint-waarschuwing strong{color:var(--warning);}

/* Staffelregels */
.of-staffels{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
.of-staffel{display:flex;align-items:center;gap:7px;}
.of-staffel-lbl{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.of-staffel input{
  width:74px;flex-shrink:0;padding:7px 9px;
  border:1.5px solid var(--border);border-radius:var(--rsm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-staffel input:focus{border-color:var(--blue);}
.of-staffel-korting{
  flex:1;font-size:11px;font-weight:700;color:var(--blue);
  text-align:right;white-space:nowrap;
}

/* Losse regels (inbegrepen) */
.of-regel{display:flex;align-items:center;gap:7px;}
.of-regel input{
  flex:1;min-width:0;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:var(--rsm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-regel input:focus{border-color:var(--blue);}

/* Uitgangspunten: label plus toelichting */
.of-uitg{display:flex;align-items:center;gap:7px;}
.of-uitg input:first-child{
  width:118px;flex-shrink:0;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:var(--rsm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-uitg input:nth-child(2){
  flex:1;min-width:0;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:var(--rsm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-uitg input:focus{border-color:var(--blue);}

/* Inline invoerveld naast een toevoegknop */
.of-inline-inp{
  flex:1;min-width:0;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:var(--rsm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-inline-inp:focus{border-color:var(--blue);}

/* Verwijderknopje */
.of-x{
  width:26px;height:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--rsm);
  color:var(--border);font-size:17px;line-height:1;cursor:pointer;
  transition:all .14s;font-family:inherit;
}
.of-x:hover{color:var(--danger);background:var(--danger-bg);}

@media(max-width:640px){
  .of-soorten{grid-template-columns:1fr;}
  .of-staffel{flex-wrap:wrap;}
  .of-staffel input{flex:1;width:auto;min-width:70px;}
  .of-staffel-korting{width:100%;text-align:left;}
  .of-uitg{flex-wrap:wrap;}
  .of-uitg input:first-child{width:100%;}
  .of-uitg input:nth-child(2){flex-basis:calc(100% - 33px);}
}

/* ── Zwevende modalvoet: dekt de onderpadding af ──
   .modal-footer is sticky met bottom:0, maar dat is de onderkant van
   het padding-vak. Met 2rem onderpadding bleef er een strook over
   waar de inhoud onder de knoppen doorschoof. De negatieve marge trekt
   de voet tot de onderrand door, de padding houdt de knoppen op hun
   plek. */
.modal-footer{
  bottom:-2rem;
  margin-bottom:-2rem;
  padding-bottom:2rem;
}
@media(max-width:768px){
  .modal-footer{
    bottom:-2rem;
    margin-bottom:-2rem;
    padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  }
}

/* ── Weekpagina: ruimte-blok ── */
.ws-ruimte-kop{
  display:flex;align-items:baseline;gap:9px;
  padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--border);
}
.ws-ruimte-getal{
  font-size:24px;font-weight:800;color:var(--blue);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.ws-ruimte-lbl{font-size:11.5px;color:var(--muted);line-height:1.4;}

/* ── Standaardteksten in Beheer ── */
.od-tabs{
  display:flex;gap:3px;background:var(--off);border-radius:20px;
  padding:3px;width:fit-content;margin-bottom:16px;flex-wrap:wrap;
}
.od-tab{
  padding:6px 15px;font-size:11px;font-weight:700;font-family:inherit;
  border:none;border-radius:20px;background:none;color:var(--muted);
  cursor:pointer;transition:all .14s;white-space:nowrap;
}
.od-tab:hover{color:var(--blue);}
.od-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.07);}
.od-blok{margin-bottom:20px;}
.od-blok:last-child{margin-bottom:0;}
.od-kop{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;margin-bottom:11px;
}
.od-titel{font-size:13px;font-weight:700;}
.od-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5;max-width:60ch;}
.od-herstel{font-size:10.5px!important;padding:5px 12px!important;white-space:nowrap;}
#od-uitg,#od-incl{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
.od-plus{font-size:11px!important;padding:5px 13px!important;}

@media(max-width:640px){
  .od-tabs{width:100%;}
  .od-tab{flex:1;}
}

/* Tekstvelden in het beheerscherm voor standaardteksten */
.od-tekst{
  display:block;width:100%;min-height:52px;resize:vertical;
  padding:9px 12px;font-size:12.5px;font-family:inherit;color:var(--black);
  line-height:1.55;
  border:1.5px solid var(--border);border-radius:var(--rsm);
  background:var(--white);outline:none;transition:border-color .15s;
}
.od-tekst:focus{border-color:var(--blue);}
#od-lever{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}

/* ═══════════════════════════════════════════════════════════════════
   KLANTPORTAAL — TIJDLIJN EN INVESTERING
   ═══════════════════════════════════════════════════════════════════ */

.pi-leeg{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0;}
.pi-voet{font-size:11px;color:var(--muted);line-height:1.6;margin-top:14px;}

/* Tijdlijn */
.pi-tl{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:16px 18px;overflow-x:auto;
}
.pi-tl-kop{display:flex;gap:12px;margin-bottom:9px;min-width:560px;}
.pi-tl-naam{width:150px;flex-shrink:0;}
.pi-tl-schaal{flex:1;display:flex;}
.pi-tl-week{
  flex:1;font-size:8.5px;font-weight:700;color:var(--muted);
  border-left:1px solid var(--border);padding-left:4px;
  overflow:hidden;white-space:nowrap;
}
.pi-tl-nu{color:var(--blue);border-left-color:var(--blue);}
.pi-tl-rij{
  display:flex;gap:12px;align-items:center;min-width:560px;
  padding:8px 0;cursor:pointer;border-radius:var(--rsm);transition:background .14s;
}
.pi-tl-rij:hover{background:var(--off);}
.pi-tl-titel{
  font-size:12px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pi-tl-fase{font-size:10px;color:var(--muted);margin-top:1px;}
.pi-tl-baan{flex:1;position:relative;height:22px;}
.pi-tl-lijn{position:absolute;top:0;bottom:0;width:1px;background:var(--border);}
.pi-tl-lijn-nu{background:var(--blue);opacity:.4;}
.pi-tl-balk{
  position:absolute;top:8px;height:6px;border-radius:3px;background:var(--blue-light);
}
.pi-tl-punt{
  position:absolute;top:5px;width:12px;height:12px;border-radius:50%;
  transform:translateX(-50%);background:var(--white);border:2px solid var(--border);
}
.pi-tl-punt.pi-klaar{background:var(--success);border-color:var(--success);}
.pi-tl-punt.pi-loopt{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}

.pi-legenda{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;
  font-size:10.5px;color:var(--muted);
}
.pi-legenda span{display:flex;align-items:center;gap:5px;}
.pi-legenda i{
  width:9px;height:9px;border-radius:50%;
  background:var(--white);border:2px solid var(--border);
}
.pi-legenda i.pi-klaar{background:var(--success);border-color:var(--success);}
.pi-legenda i.pi-loopt{background:var(--blue);border-color:var(--blue);}

.pi-zonder{
  margin-top:12px;padding:12px 15px;background:var(--off);
  border-radius:var(--rsm);font-size:11.5px;line-height:1.6;
}
.pi-zonder strong{display:block;margin-bottom:2px;}
.pi-zonder span{color:var(--muted);}

/* Investering */
.pi-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:18px;
}
.pi-kpi{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:15px 17px;
}
.pi-kpi-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:7px;
}
.pi-kpi-val{
  font-size:20px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.pi-kpi-sub{font-size:10.5px;color:var(--muted);margin-top:5px;}

.pi-blok{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:16px 18px;margin-bottom:14px;
}
.pi-blok-kop{font-size:13px;font-weight:700;margin-bottom:12px;}
.pi-rij{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:10px 0;border-bottom:1px dotted var(--border);
}
.pi-rij:last-child{border-bottom:none;}
.pi-rij-txt{flex:1;min-width:0;}
.pi-rij-titel{font-size:12.5px;font-weight:700;line-height:1.35;}
.pi-rij-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45;}
.pi-rij-rechts{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.pi-bedrag{
  font-size:13px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pi-status{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.pi-betaald{background:var(--success-bg);color:var(--success);}
.pi-open{background:var(--warning-bg);color:var(--warning);}
.pi-telaat{background:var(--danger-bg);color:var(--danger);}

@media(max-width:640px){
  .pi-tl{padding:14px 12px;}
  .pi-tl-naam{width:110px;}
  .pi-kpis{grid-template-columns:1fr;}
  .pi-rij{flex-wrap:wrap;}
  .pi-rij-rechts{width:100%;justify-content:space-between;}
}