@import"https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap";:root{color-scheme:light;font-family:Inter,Trebuchet MS,sans-serif;font-size:14px;line-height:1.55;--bg-start: #f3f5fb;--bg-mid: #f6f8fc;--bg-end: #fbfbfd;--surface: #ffffffee;--surface-strong: #ffffff;--surface-soft: #f8f8fd;--ink: #14182b;--ink-soft: #5b6479;--ink-faint: #9298ac;--border: #e5e8f2;--border-soft: #edeff6;--shadow-soft: 0 1px 2px rgba(20, 24, 43, .04), 0 8px 24px rgba(20, 24, 43, .06);--shadow-strong: 0 4px 10px rgba(20, 24, 43, .06), 0 24px 48px rgba(20, 24, 43, .14);--shadow-lift: 0 2px 6px rgba(20, 24, 43, .05), 0 12px 28px rgba(20, 24, 43, .08);--sidebar-start: #14172a;--sidebar-end: #1c2038;--sidebar-ink: #f3f4fb;--sidebar-ink-soft: #9296b3;--accent: #6a5cff;--accent-dark: #5546e6;--accent-bright: #7c6bff;--accent-soft: #ece9ff;--accent-line: #d9d3ff;--danger: #e0505f;--danger-dark: #c33c4b;--danger-soft: #fdeaec;--success: #17a870;--success-soft: #e2f8ee;--warning: #b3790b;--warning-soft: #fff1d9;--radius-lg: 20px;--radius-md: 14px;--radius-sm: 10px;--radius-pill: 999px}*,*:before,*:after{box-sizing:border-box}h1,h2,h3,h4{font-family:Sora,Gill Sans,sans-serif;letter-spacing:-.01em;color:var(--ink)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0%,rgba(106,92,255,.09) 0%,transparent 32%),radial-gradient(circle at 100% 100%,rgba(23,168,112,.07) 0%,transparent 34%),linear-gradient(180deg,var(--bg-start) 0%,var(--bg-mid) 45%,var(--bg-end) 100%);color:var(--ink);-webkit-font-smoothing:antialiased}::selection{background:var(--accent-soft);color:var(--accent-dark)}a{color:var(--accent-dark);text-decoration:none;font-weight:500}a:hover{text-decoration:underline}.auth-page{min-height:100vh;display:grid;place-items:center;padding:18px}.auth-card{position:relative;width:min(560px,96vw);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 30px 30px;box-shadow:var(--shadow-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;gap:14px;overflow:hidden;animation:rise-in .4s ease both}.auth-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-bright) 45%,var(--success) 100%)}.auth-card h1{font-size:1.5rem;margin:6px 0 0}.logo-lockup{display:inline-flex;align-items:center;gap:10px}.logo-mark{flex:none;display:block}.logo-word{font-family:Sora,Gill Sans,sans-serif;font-weight:800;letter-spacing:-.02em;white-space:nowrap;line-height:1}.logo-word-dark{color:var(--ink)}.logo-word-accent{background:linear-gradient(135deg,var(--accent-bright) 0%,var(--accent-dark) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.auth-logo{margin-bottom:2px}.auth-logo .logo-mark{width:44px;height:44px}.auth-logo .logo-word{font-size:1.5rem}.auth-card .message{margin-top:2px}.app{height:100vh;overflow:hidden;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{background:radial-gradient(circle at 20% 0%,rgba(124,107,255,.24),transparent 40%),linear-gradient(180deg,var(--sidebar-start) 0%,var(--sidebar-end) 100%);color:var(--sidebar-ink);padding:26px 18px;display:grid;align-content:start;gap:24px;border-right:1px solid rgba(255,255,255,.06);height:100%;overflow-y:auto}.sidebar-brand{display:grid;gap:10px;background:#fff;border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-soft)}.brand-logo .logo-mark{width:32px;height:32px}.brand-logo .logo-word{font-size:1.15rem}.sidebar-text{margin:0;color:var(--sidebar-ink-soft);font-size:.85rem;line-height:1.55;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-nav{display:grid;gap:5px}.sidebar-subnav{margin-left:0;padding-left:0;border-left:none}.sidebar-subnav button{font-size:.88rem;padding:9px 14px;display:flex;align-items:center;gap:10px}.sidebar-nav button{width:100%;display:flex;align-items:center;gap:10px;justify-content:flex-start;border:1px solid transparent;background:transparent;color:var(--sidebar-ink-soft);font-weight:500;padding:11px 14px;border-radius:var(--radius-sm);box-shadow:none;transition:background-color .14s ease,color .14s ease,box-shadow .14s ease}.sidebar-nav button:hover{background:#ffffff12;color:var(--sidebar-ink);filter:none;transform:none;box-shadow:none}.sidebar-nav button.active{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);border-color:transparent;color:#fff;box-shadow:0 8px 18px #6a5cff61}.sidebar-actions{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}.sidebar-actions .secondary{width:100%;background:#ffffff0d;border-color:#ffffff24;color:var(--sidebar-ink);box-shadow:none}.sidebar-actions .secondary:hover{background:#ffffff1c;box-shadow:none}.content::-webkit-scrollbar{width:5px}.content::-webkit-scrollbar-track{background:transparent}.content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.content::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:2px}.sidebar-toggle{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;padding:8px 10px;color:var(--sidebar-ink);font-size:1rem;border-radius:var(--radius-sm);transition:background .14s ease}.sidebar-toggle:hover{background:#ffffff18}.app.sidebar-collapsed{grid-template-columns:52px minmax(0,1fr)}.sidebar--collapsed{overflow:hidden}.sidebar--collapsed .sidebar-toggle{justify-content:center;padding:10px}.sidebar--collapsed .sidebar-brand,.sidebar--collapsed .sidebar-text,.sidebar--collapsed .sidebar-nav,.sidebar--collapsed .sidebar-actions{display:none}.sidebar-customer{display:grid;gap:6px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-customer-label{font-size:.72rem;text-transform:uppercase;color:var(--sidebar-ink-soft);letter-spacing:.06em;font-weight:700}.sidebar-customer select{background:#ffffff12;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-sm);color:var(--sidebar-ink);padding:9px 12px;font-size:.9rem;width:100%}.sidebar-customer select:focus{border-color:var(--accent-bright);box-shadow:0 0 0 3px #6a5cff30;outline:none}.sidebar-customer select option{background:var(--sidebar-end);color:var(--sidebar-ink)}.sidebar--collapsed .sidebar-customer{display:none}.content{padding:16px clamp(12px,1.6vw,28px);display:grid;align-content:start;gap:12px;width:100%;height:100%;overflow-y:auto}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px 16px;box-shadow:inset 0 3px 0 var(--accent-bright),var(--shadow-soft);animation:rise-in .35s ease both}.panel h2{font-size:1.2rem;font-family:Sora,sans-serif;letter-spacing:-.02em}.panel>.muted:first-of-type{margin-top:-6px;font-size:.92rem}.subpanel{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px 16px;box-shadow:inset 0 3px 0 var(--accent-line),0 1px 3px #14182b0a,0 6px 20px #14182b0f;transition:box-shadow .2s ease,border-color .2s ease;animation:rise-in .35s ease both}.subpanel:hover{box-shadow:inset 0 3px 0 var(--accent-bright),var(--shadow-lift);border-color:var(--accent-line)}.panel h2,.subpanel h3{margin-top:0}.subpanel h3{font-family:Sora,sans-serif;font-size:.98rem;letter-spacing:-.01em;padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--border-soft)}.subheader{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--border-soft)}.subheader button,.subheader button.secondary{padding:8px 14px;font-size:.86rem}.view-tabs{display:flex;gap:4px;padding:4px;margin-bottom:16px;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-pill);width:fit-content}.view-tabs button{background:transparent;color:var(--ink-soft);border:1px solid transparent;box-shadow:none;padding:8px 18px;border-radius:var(--radius-pill);font-size:.9rem}.view-tabs button:hover{background:#fff;color:var(--ink);filter:none;transform:none;box-shadow:none}.view-tabs button.active{background:linear-gradient(135deg,var(--accent-bright) 0%,var(--accent-dark) 100%);color:#fff;box-shadow:0 4px 12px #6a5cff47}.view-tabs.sub-tabs{background:transparent;border:none;padding:0;margin-top:4px;gap:6px}.view-tabs.sub-tabs button{background:var(--surface-strong);border:1px solid var(--border);padding:7px 15px;font-size:.86rem}.view-tabs.sub-tabs button.active{background:var(--accent-soft);color:var(--accent-dark);border-color:var(--accent-line);box-shadow:none}.integration-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.integration-card{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface-strong);border:1px solid var(--border);padding:16px 18px;border-radius:var(--radius-md);color:var(--ink);box-shadow:none;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}.integration-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-lift);transform:translateY(-1px);filter:none}.integration-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent-dark);flex:none}.integration-info{display:grid;gap:2px;flex:1;min-width:0}.integration-info small{color:var(--ink-soft)}.back-link{width:fit-content;margin-bottom:16px}.subheader h3{padding-bottom:0;margin-bottom:0;border-bottom:0}.subpanel form.grid{background:var(--bg-start);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:16px;margin-bottom:14px}.inbox-panel .subheader{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--border-soft)}.settings-overview{display:grid;gap:8px;margin-bottom:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.status-card{position:relative;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-sm);padding:10px 12px 10px 14px;display:grid;gap:2px;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}.status-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%)}.status-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}.status-label{font-size:.72rem;text-transform:uppercase;color:#6b6693;letter-spacing:.05em;font-weight:700}.status-value{color:var(--ink);font-family:Sora,sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-.02em}.status-meta{color:var(--ink-soft)}.backoffice-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.portal-top-grid{display:grid;gap:18px;margin-top:16px;grid-template-columns:minmax(320px,1fr) minmax(460px,1.2fr)}.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.paynl-grid{grid-template-columns:1fr}label{display:grid;gap:6px;font-weight:600;font-size:.9rem;color:var(--ink)}input,select,textarea,button{font:inherit}input,select,textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 13px;width:100%;background:#fff;color:var(--ink);transition:border-color .14s ease,box-shadow .14s ease}input::placeholder,textarea::placeholder{color:var(--ink-faint)}input:hover,select:hover,textarea:hover{border-color:#d3d7e6}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px #6a5cff24;outline:none}textarea{min-height:92px;resize:vertical}.full{grid-column:1 / -1}button{border:1px solid transparent;background:linear-gradient(135deg,var(--accent-bright) 0%,var(--accent-dark) 100%);color:#fff;padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;box-shadow:0 4px 12px #6a5cff38;transition:transform .1s ease,box-shadow .16s ease,filter .12s ease}button.secondary{background:#fff;color:var(--ink);border-color:#d8dce8;box-shadow:none;font-weight:600}button.secondary:hover{background:var(--surface-soft);border-color:#d3d7e6;filter:none;box-shadow:none;transform:none}button.danger{background:linear-gradient(135deg,#ef6a77 0%,var(--danger-dark) 100%);border-color:transparent;color:#fff;box-shadow:0 4px 12px #c33c4b3d}button:hover{filter:brightness(1.05);box-shadow:0 8px 20px #6a5cff4d;transform:translateY(-1px)}button.secondary:hover,button.danger:hover{box-shadow:0 6px 16px #c33c4b38}button.secondary:hover{box-shadow:none}button:active{transform:translateY(1px)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;filter:none}.actions{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.list{display:grid;gap:10px;margin-top:14px}.customers-list,.list.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.dossier-list{grid-template-columns:1fr}.item{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 15px;display:grid;gap:4px;transition:border-color .14s ease,box-shadow .14s ease}.item:hover{border-color:#d8dcec;box-shadow:var(--shadow-lift)}.item small{color:var(--ink-soft)}.row{display:flex;justify-content:space-between;align-items:center;gap:8px}.placeholder-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.placeholder-chips code{border:1px solid var(--border);background:var(--surface-soft);padding:3px 10px;border-radius:var(--radius-pill);color:#4c4f66;font-size:.8rem}.template-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;background:var(--surface-soft)}.template-card summary{cursor:pointer;font-weight:700;color:var(--ink)}.template-card summary:hover{color:var(--accent-dark)}.template-body{display:grid;gap:10px;margin-top:10px}.template-textarea{min-height:130px}.scheduler-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;background:var(--surface-soft);display:grid;gap:10px}.scheduler-card h4{margin:0;font-size:.98rem}.inbox-panel{grid-column:1 / -1}.inbox-layout{display:grid;gap:16px;grid-template-columns:minmax(260px,340px) 1fr}.inbox-list{display:grid;gap:8px;align-content:start;max-height:520px;overflow:auto;padding-right:2px}.inbox-thread{text-align:left;background:var(--surface-soft);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;display:grid;gap:4px;transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease}.inbox-thread:hover{border-color:#d8dcec;box-shadow:var(--shadow-lift)}.inbox-thread.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}.inbox-thread small{color:var(--ink-soft)}.inbox-thread-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.inbox-conversation{border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;background:var(--surface-soft);display:grid;gap:12px}.inbox-header{padding-bottom:12px;border-bottom:1px solid var(--border-soft)}.inbox-header p{margin:0}.inbox-messages{display:grid;gap:10px;max-height:360px;overflow:auto;padding-right:2px}.empty-cell{color:var(--ink-faint)}.row-actions{display:flex;flex-wrap:wrap;gap:8px}.row-actions button{white-space:nowrap;padding:8px 12px;font-size:.85rem}.badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:60px;border-radius:var(--radius-pill);padding:3px 11px 3px 9px;font-size:.69rem;text-transform:uppercase;font-weight:700;letter-spacing:.05em}.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}.badge.open{background:var(--warning-soft);color:var(--warning);border:1px solid #f0dfa0}.badge.paid{background:var(--success-soft);color:#0d7a49;border:1px solid #b8e8cf}.message{margin:0;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid transparent;border-left-width:4px;box-shadow:var(--shadow-soft);font-weight:500}.message.info{background:var(--accent-soft);border-color:var(--accent-line);border-left-color:var(--accent);color:#4535c9}.message.success{background:var(--success-soft);border-color:#c3ecd7;border-left-color:var(--success);color:#0d7a49}.message.error{background:var(--danger-soft);border-color:#fad0d5;border-left-color:var(--danger-dark);color:#b23545}.muted{margin:0 0 10px;color:var(--ink-soft)}.empty{margin:0;padding:20px;color:var(--ink-faint);background:var(--surface-soft);border:1px dashed var(--border-soft);border-radius:var(--radius-sm);text-align:center;font-size:.9rem;letter-spacing:.01em}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.public-dossier-card{width:min(860px,98vw)}.public-logo{margin-bottom:4px}.public-logo .logo-mark{width:40px;height:40px}.public-logo .logo-word{font-size:1.35rem}.public-dossier-meta{display:grid;gap:6px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}.public-dossier-meta p{margin:0}.public-chat h2{margin:0 0 12px;font-size:1.1rem}.public-chat-list{display:grid;gap:10px;margin-bottom:14px}.public-chat-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;background:var(--surface-soft)}.public-chat-item.team{background:var(--accent-soft);border-color:var(--accent-line)}.public-chat-item header{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px}.public-chat-item p{margin:0;white-space:pre-wrap}.sidebar-section-label{display:block;font-size:.68rem;text-transform:uppercase;color:var(--sidebar-ink-soft);letter-spacing:.09em;font-weight:700;padding:14px 14px 3px;opacity:.65}.nav-icon{font-size:.95rem;width:18px;text-align:center;flex:none;line-height:1;display:inline-block}.sidebar-nav{gap:3px}@keyframes rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.auth-card,.panel,.subpanel{animation:none}button,.subpanel,.status-card,.item,.inbox-thread{transition:none}}@media (max-width: 1180px){.backoffice-grid,.portal-top-grid{grid-template-columns:1fr}}@media (max-width: 860px){.app{grid-template-columns:1fr;height:auto;overflow:visible}.sidebar{gap:16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:18px 16px}.sidebar-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-logo .logo-word{font-size:1.05rem}.content{padding:14px 10px 18px;height:auto;overflow-y:visible}.panel,.subpanel{padding:16px}.inbox-layout{grid-template-columns:1fr}}

.dossier-table-wrap{margin-top:16px;width:100%;overflow-x:auto;border:none;border-radius:var(--radius-md);background:transparent;box-shadow:var(--shadow-soft)}
.dossier-table-wrap::-webkit-scrollbar{height:5px}
.dossier-table-wrap::-webkit-scrollbar-track{background:var(--surface-soft)}
.dossier-table-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.dossier-table-wrap::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}
.dossier-table{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;background:var(--surface-strong);border-radius:var(--radius-md);overflow:hidden}
.dossier-table th{font-size:.7rem;color:var(--ink-faint);background:var(--bg-end);text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:11px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
.dossier-table td{padding:11px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--border-soft)}
.dossier-table tbody tr:last-child td{border-bottom:0}
.dossier-table tbody tr td:first-child{border-left:3px solid transparent;padding-left:12px}
.dossier-row--paid td:first-child{border-left-color:var(--success)}
.dossier-row--aanmaning td:first-child{border-left-color:var(--danger)}
.dossier-row--open td:first-child{border-left-color:var(--accent)}
.dossier-row--paid{background:#f8fdfb}
.dossier-row--aanmaning{background:#fffafa}
.dossier-row--open{background:var(--surface-strong)}
.dossier-table tbody tr{transition:background .12s ease,box-shadow .12s ease;cursor:default}
.dossier-table tbody tr:hover{background:var(--accent-soft)!important}
.dossier-table tbody tr:hover td:first-child{border-left-color:var(--accent)!important}
.dossier-num{font-family:'SF Mono','Fira Code',ui-monospace,monospace;font-size:.78rem;font-weight:700;color:var(--accent-dark);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:6px;padding:3px 8px;letter-spacing:.02em;white-space:nowrap;display:inline-block}
.dossier-debtor{display:grid;gap:1px}
.dossier-debtor strong{font-size:.88rem;font-weight:600;color:var(--ink)}
.dossier-debtor span{font-size:.76rem;color:var(--ink-faint)}
.dossier-amount{display:grid;gap:1px}
.dossier-amount strong{font-size:.95rem;font-weight:700;color:var(--ink)}
.dossier-amount small{font-size:.74rem;color:var(--ink-faint)}
.dossier-table .row-actions button{font-size:.78rem;padding:5px 12px;border-radius:8px}
.badge.aanmaning{background:var(--danger-soft);color:var(--danger-dark);border:1px solid #f5c0c5}

/* v18 summary bar */
.dossier-summary-bar{display:flex;align-items:center;background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom:none;padding:10px 16px;box-shadow:var(--shadow-soft);margin-top:16px}
.dsb-inner{display:flex;align-items:center;gap:20px;flex-wrap:wrap;width:100%}
.dsb-stat{display:inline-flex;align-items:baseline;gap:5px;font-size:.82rem;color:var(--ink-soft)}
.dsb-stat strong{font-family:Sora,sans-serif;font-size:.98rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dsb-amount{margin-left:auto}
.dsb-amount strong{color:var(--accent-dark)}
.dossier-summary-bar+.dossier-table-wrap{margin-top:0;border-radius:0 0 var(--radius-md) var(--radius-md)}
.dossier-summary-bar+.dossier-table-wrap .dossier-table{border-top-left-radius:0;border-top-right-radius:0}
/* followup cell */
.followup-cell{display:flex;flex-direction:column;gap:3px}
.followup-cell small{font-size:.75rem;color:var(--ink-faint)}
.reminder-count{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap;width:fit-content}
.rc-ok{background:var(--success-soft);color:#0d7a49}
.rc-warn{background:var(--warning-soft);color:var(--warning)}
.rc-max{background:var(--danger-soft);color:var(--danger-dark)}
/* overdue date td */
td.overdue-date{color:var(--danger-dark);font-weight:600}

/* === Dossier detail page === */
.auth-card.public-dossier-card{width:min(800px,96vw);gap:16px}
/* Meta info card */
.public-dossier-meta{display:grid;gap:0;margin-bottom:0;padding:0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-strong)}
.public-dossier-meta>p{display:grid;grid-template-columns:110px 1fr;align-items:baseline;gap:10px;padding:11px 14px;margin:0;border-bottom:1px solid var(--border-soft);font-size:.92rem}
.public-dossier-meta>p:last-of-type{border-bottom:none}
.public-dossier-meta>p>strong{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700;white-space:nowrap}
.public-dossier-meta>.actions{padding:12px 14px;border-top:1px solid var(--border-soft)}
.public-dossier-meta>.actions button{min-width:140px}
.public-dossier-meta>.muted{padding:11px 14px;border-top:1px solid var(--border-soft);margin:0;color:var(--ink-soft);font-size:.9rem}
.public-dossier-meta>.message{margin:0;border-radius:0;border-left-width:3px;border-top:1px solid transparent}
/* Chat section */
.public-chat{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px 18px}
.public-chat h2{font-family:Sora,sans-serif;font-size:.95rem;letter-spacing:-.01em;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border-soft)}
.public-chat-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.public-chat-item{max-width:84%;align-self:flex-start;border-radius:var(--radius-sm) var(--radius-sm) var(--radius-sm) 4px;padding:10px 13px;box-shadow:0 1px 3px rgba(20,24,43,.05)}
.public-chat-item.team{border-radius:var(--radius-sm) var(--radius-sm) var(--radius-sm) 4px}
.public-chat-item.customer{align-self:flex-end;background:var(--surface-strong);border-color:var(--border);border-radius:var(--radius-sm) var(--radius-sm) 4px var(--radius-sm)}
.public-chat-item header{margin-bottom:4px}
.public-chat-item header strong{font-size:.8rem}
.public-chat-item header small{font-size:.75rem;color:var(--ink-faint)}
.public-chat-item p{font-size:.9rem;line-height:1.55}
/* Chat form */
.public-chat>.grid{margin-top:4px;background:var(--surface-strong);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:14px}

/* === Chat inbox improvements === */
/* Compact filter bar */
.inbox-panel>.grid{grid-template-columns:minmax(160px,300px);margin-bottom:4px}
/* Thread list */
.inbox-list{gap:5px}
.inbox-thread{padding:11px 12px;gap:4px;border-left:3px solid transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* Urgent thread (has "Wacht op team" badge) */
.inbox-thread:has(.badge.open){border-left-color:var(--warning);background:var(--warning-soft)}
.inbox-thread.active{border-left-color:var(--accent)!important;background:var(--accent-soft)!important}
.inbox-thread-top{margin-bottom:1px}
.inbox-thread-top strong{font-family:Sora,sans-serif;font-size:.86rem;letter-spacing:-.01em}
/* Conversation panel as proper chat window */
.inbox-conversation{padding:0;gap:0;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-strong);display:flex;flex-direction:column}
.inbox-header{padding:13px 16px;background:var(--surface-strong);border-bottom:1px solid var(--border-soft);flex:none}
.inbox-messages{flex:1;background:var(--bg-start);padding:14px 16px;max-height:400px;gap:10px;overflow-y:auto}
/* Keep message width unrestricted in inbox (margin-based positioning) */
.inbox-messages .public-chat-item{max-width:none}
/* Reply form pinned to bottom */
.inbox-conversation>form.grid{padding:13px 16px;margin:0;background:var(--surface-strong);border-top:1px solid var(--border-soft);border-radius:0;flex:none}
.inbox-conversation>form.grid label{font-size:.85rem}
.inbox-conversation>form.grid textarea{min-height:72px}

/* === WhatsApp-stijl chat inbox === */
/* Layout */
.inbox-layout{gap:0;border:1px solid #e5e7ea;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft)}
/* Thread list */
.inbox-list{background:#fff;border-right:1px solid #e5e7ea;max-height:420px;gap:0;padding-right:0}
.inbox-thread{border:none;border-bottom:1px solid #f5f5f5;border-radius:0;padding:11px 14px 11px 68px;position:relative;background:#fff;gap:3px;transition:background .12s ease;border-left:none!important}
/* Avatar circle */
.inbox-thread::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#dfe5e7}
/* Avatar initial via .chat-avatar */
.chat-avatar{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#90a4ae 0%,#607d8b 100%);display:flex;align-items:center;justify-content:center;font-family:Sora,sans-serif;font-size:1.1rem;font-weight:700;color:#fff;flex:none;z-index:1;text-transform:uppercase}
.inbox-thread:has(.badge.open) .chat-avatar{background:linear-gradient(135deg,#43d477 0%,#25a244 100%)}
.inbox-thread:hover{background:#f5f5f5;border-color:#f5f5f5;box-shadow:none;transform:none}
.inbox-thread.active{background:#ebebeb!important;box-shadow:none!important;border-left:none!important}
.inbox-thread-top{margin-bottom:0}
.inbox-thread-top strong{font-family:Sora,sans-serif;font-size:.9rem;font-weight:700;color:#111}
/* WhatsApp-stijl badge */
.inbox-thread .badge{font-size:.65rem;min-width:20px;padding:2px 7px;border-radius:10px}
.inbox-thread .badge.open{background:#25d366;color:#fff;border:none}
.inbox-thread .badge.paid{background:transparent;color:#8696a0;border:none;font-size:.7rem;padding:0}
/* Thread preview text */
.inbox-thread>small{color:#667781;font-size:.82rem}
/* Timestamp */
.inbox-thread>small:last-child{color:#8696a0;font-size:.73rem}
/* Conversation panel */
.inbox-conversation{display:flex;flex-direction:column;border-radius:0;border:none;padding:0;gap:0;overflow:hidden}
.inbox-header{background:#f0f2f5;border-bottom:1px solid #e5e7ea;padding:12px 16px;flex:none}
/* Message area — WhatsApp beige */
.inbox-messages{background:#e9ded8;padding:12px 16px;max-height:500px;gap:6px;display:flex!important;flex-direction:column}
/* Override inline margin styles with !important */
.inbox-messages .public-chat-item{max-width:78%!important;border:none;border-radius:8px;padding:8px 12px 5px;box-shadow:0 1px 2px rgba(0,0,0,.12);display:flex;flex-direction:column;position:relative;margin:0!important}
/* Customer = ontvangen (wit, links) */
.inbox-messages .public-chat-item.customer{background:#fff;border-radius:0 8px 8px 8px;align-self:flex-start!important}
.inbox-messages .public-chat-item.customer::after{content:"";position:absolute;top:0;left:-8px;border-top:8px solid #fff;border-left:8px solid transparent}
/* Team = verzonden (groen, rechts) */
.inbox-messages .public-chat-item.team{background:#d9fdd3;border-radius:8px 0 8px 8px;align-self:flex-end!important}
.inbox-messages .public-chat-item.team::after{content:"";position:absolute;top:0;right:-8px;border-top:8px solid #d9fdd3;border-right:8px solid transparent}
/* Bericht tekst */
.inbox-messages .public-chat-item p{order:1;font-size:.9rem;color:#111;line-height:1.5;margin:0}
/* Meta (naam + tijd) onderaan bubble */
.inbox-messages .public-chat-item header{order:2;display:flex;justify-content:flex-end;gap:6px;margin:3px 0 0;align-items:center}
.inbox-messages .public-chat-item header strong{font-size:.7rem;color:#667781;font-weight:500}
.inbox-messages .public-chat-item header small{font-size:.7rem;color:#8696a0}
/* Reply form */
.inbox-conversation>form.grid{background:#f0f2f5;border-top:1px solid #e5e7ea;padding:12px 16px;border-radius:0;margin:0;flex:none}
.inbox-conversation>form.grid textarea{min-height:56px;background:#fff;border-radius:var(--radius-pill);padding:10px 16px;border-color:#e5e7ea}


/* ═══════════════════════════════════════════════════════════════════════════
   Restyling naar de opzet van het Cloudsys-beheerportaal.
   De kleuren blijven van IncassoFlow: paars accent, dezelfde inkt- en
   achtergrondtinten. Alleen de vormentaal verandert — rustiger vlakken,
   een lichte zijbalk en strakkere kaarten.

   Dit blok staat achteraan en overschrijft de regels erboven; de oorspronkelijke
   opmaak blijft daarmee intact als vertrekpunt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Iets rustiger schaduwen: in de Cloudsys-opzet dragen randen het beeld,
     niet de schaduwen. */
  --shadow-soft: 0 1px 2px rgba(20, 24, 43, .05), 0 8px 24px rgba(20, 24, 43, .06);
  --shadow-lift: 0 1px 2px rgba(20, 24, 43, .05), 0 8px 24px rgba(20, 24, 43, .06);
  --nav-hover:   #f4f5f9;
}

/* ── Zijbalk: van donker verloop naar licht ──────────────────────────────── */

.sidebar {
  background: #fff;
  border-right: 1px solid var(--border);
  border-bottom: 0;
  color: var(--ink);
  padding: 20px 16px;
  gap: 20px;
}

/* Het merk stond in een wit blokje omdat de zijbalk donker was; op een lichte
   achtergrond mag dat blokje weg. */
.sidebar-brand {
  background: transparent;
  box-shadow: none;
  padding: 2px 4px 0;
  gap: 8px;
}

.sidebar-text {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.sidebar-section-label {
  color: #93a1b5;
  opacity: 1;
  padding: 14px 11px 5px;
}

.sidebar-nav button {
  color: var(--ink-soft);
  border: 0;
  padding: 9px 11px;
  border-radius: 8px;
  font-weight: 600;
}

.sidebar-nav button:hover {
  background: var(--nav-hover);
  color: var(--ink);
}

/* Actief: een rustig vlak in de accentkleur in plaats van een verloop met
   slagschaduw. Dat leest kalmer in een lange lijst. */
.sidebar-nav button.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: none;
  border-color: transparent;
}

.sidebar-customer {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.sidebar-customer-label { color: #93a1b5; }

.sidebar-customer select {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
}

.sidebar-customer select option {
  background: #fff;
  color: var(--ink);
}

.sidebar-actions {
  border-top: 1px solid var(--border);
}

.sidebar-actions .secondary {
  background: #fff;
  border-color: var(--border);
  color: var(--ink);
}

.sidebar-actions .secondary:hover {
  background: var(--nav-hover);
  border-color: #d3d7e6;
}

.sidebar-toggle { color: var(--ink-soft); }
.sidebar-toggle:hover { background: var(--nav-hover); }

.sidebar::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Kaarten: strakker, zonder accentstreep ──────────────────────────────── */

.panel {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* De paarse streep bovenaan elke kaart verdwijnt: bij veel kaarten onder
     elkaar trekt die te veel aandacht naar de rand in plaats van de inhoud. */
  box-shadow: var(--shadow-soft);
  padding: 0 18px 18px;
  overflow: hidden;
}

/* De kop krijgt een eigen strook met een scheidingslijn, zoals in het
   beheerportaal.
   De strook loopt tot de rand door met een negatieve marge, in plaats van de
   binnenruimte van de kaart weg te halen en die op elk kind terug te zetten:
   dat laatste zou aannames doen over de opbouw binnen een kaart, en die
   verschilt per scherm. */
.panel > h2 {
  margin: 0 -18px 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
  letter-spacing: -.01em;
  background: var(--surface-strong);
}

.panel > .muted:first-of-type {
  font-size: .9rem;
  color: var(--ink-soft);
}

.subpanel {
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--surface-soft);
}

/* ── Knoppen: vlak in plaats van verlopen ────────────────────────────────── */

button {
  background: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
  border-radius: 9px;
  padding: 9px 15px;
  font-size: .92rem;
}

button:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  filter: none;
  box-shadow: none;
  transform: none;
}

button:active { transform: none; }

button.secondary {
  background: #fff;
  border-color: var(--border);
  color: var(--ink);
}

button.secondary:hover {
  background: var(--nav-hover);
  border-color: #d3d7e6;
}

button.danger {
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: none;
}

button.danger:hover {
  background: var(--danger-dark);
  border-color: var(--danger-dark);
  box-shadow: none;
}

/* ── Tabs: rustiger ──────────────────────────────────────────────────────── */

.view-tabs button.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: none;
}

.view-tabs button:hover {
  background: var(--nav-hover);
}

/* ── Badges: kleiner en zonder hoofdletters ──────────────────────────────── */

.badge {
  text-transform: none;
  letter-spacing: 0;
  font-size: .74rem;
  font-weight: 650;
  min-width: 0;
  padding: 3px 10px;
}

/* ── Tabellen ────────────────────────────────────────────────────────────── */

.dossier-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
  background: var(--surface-strong);
}

.dossier-table th {
  background: #fafbfe;
  text-transform: none;
  letter-spacing: 0;
  font-size: .78rem;
  color: var(--ink-soft);
  font-weight: 650;
}

.dossier-table tbody tr:hover {
  background: var(--surface-soft) !important;
}

/* Een tabel die rechtstreeks in een kaart staat, loopt tot de randen door.
   De kaart heeft zelf al een rand; een tweede eromheen oogt rommelig. */
.panel > .dossier-table-wrap {
  margin: 0 -18px -18px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

/* ── Inlogscherm ─────────────────────────────────────────────────────────── */

.auth-card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
/* ════════════════════════════════════════════════════════════════════════════
   Rustiger opbouw, in de lijn van beheer.cloudsys.nl.

   Het uitgangspunt: één laag kaarten, randen in plaats van schaduwen en
   kleurvlakken, en kleur alleen waar hij iets betekent. De paarse huisstijl
   blijft, maar draagt niet langer elk vlak — hij markeert nog wat actief is en
   de ene knop die je moet hebben.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --line:        #dde4ee;
  --line-soft:   #eef2f7;
  --ink:         #16202e;
  --muted:       #5f6f85;
  --faint:       #8494a9;
  --bg:          #f4f6fa;
  --card:        #ffffff;
  --radius:      12px;
  --shadow:      0 1px 2px rgba(16, 32, 54, .06), 0 8px 24px rgba(16, 32, 54, .06);

  /* De huisstijlkleur blijft, alleen ingetogener toegepast. */
  --accent:      #5546e6;
  --accent-soft: #f0eeff;
  --accent-line: #ddd8fb;
}

/* Eén rustige ondergrond; de gradiënten leidden af van de inhoud. */
body {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}
h2 { font-size: 17px; }
h3 { font-size: 15px; }

/* ── Eén laag kaarten ──────────────────────────────────────────────────────
   Het buitenste paneel was een kaart om kaarten heen. Die haalt alleen maar
   een niveau diepte weg dat niets toevoegt; hij wordt een lege omhulling. */
.panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  animation: none;
  display: grid;
  gap: 14px;
}
.panel > h2 { margin-bottom: 2px; }

.subpanel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  animation: none;
  transition: none;
  overflow: hidden;
}
/* Geen optillen bij aanwijzen: een kaart is geen knop. */
.subpanel:hover { box-shadow: var(--shadow); border-color: var(--line); }

/* De inhoud van een kaart krijgt zijn lucht van binnenuit, zodat de kopregel
   met een lijn over de volle breedte kan lopen. */
.subpanel > *          { margin-left: 18px; margin-right: 18px; }
.subpanel > *:first-child { margin-top: 16px; }
.subpanel > *:last-child  { margin-bottom: 18px; }

.subpanel > .subheader,
.subpanel > h3 {
  margin: 0;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.subpanel > .subheader + *,
.subpanel > h3 + * { margin-top: 16px; }

.subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.subheader h3 { padding: 0; margin: 0; border: 0; }

/* ── Zijbalk ───────────────────────────────────────────────────────────────
   Licht, met een rand in plaats van een kleurvlak. Wat actief is, is zacht
   gemarkeerd — niet met een gloed die de aandacht van de inhoud wegtrekt. */
.sidebar {
  background: var(--card);
  border-right: 1px solid var(--line);
  color: var(--ink);
}
.sidebar-text { color: var(--muted); border-bottom-color: var(--line-soft); }
.sidebar-nav button {
  color: var(--muted);
  font-weight: 550;
  border-radius: 9px;
  padding: 9px 12px;
}
.sidebar-nav button:hover { background: #f4f6fa; color: var(--ink); }
.sidebar-nav button.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
  box-shadow: none;
}
.sidebar-section-label { color: var(--faint); opacity: 1; }
.sidebar-brand { box-shadow: none; padding: 0 0 12px; border-bottom: 1px solid var(--line-soft); }
.sidebar-actions { border-top-color: var(--line-soft); }
.sidebar-actions .secondary {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.sidebar-actions .secondary:hover { background: #f7f9fd; }
.sidebar-customer { border-bottom-color: var(--line-soft); }
.sidebar-customer-label { color: var(--faint); }
.sidebar-customer select { background: #fff; border-color: var(--line); color: var(--ink); }
.sidebar-toggle { color: var(--muted); }
.sidebar-toggle:hover { background: #f4f6fa; }

.content { gap: 14px; padding: 18px clamp(14px, 1.8vw, 26px); }

/* ── Knoppen ───────────────────────────────────────────────────────────────
   Wit met een rand als standaard, één gevulde knop per scherm. Zonder
   verlopen en zonder gekleurde schaduw: die maakten elke knop even luid. */
button {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 9px;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease;
}
button:hover { background: #4636d6; border-color: #4636d6; filter: none; transform: none; box-shadow: none; }
button:active { transform: none; }

button.secondary {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
button.secondary:hover { background: #f7f9fd; border-color: var(--line); box-shadow: none; }

button.danger {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
  box-shadow: none;
}
button.danger:hover { background: #b02020; border-color: #b02020; box-shadow: none; }

.row-actions button, .subheader button, .subheader button.secondary {
  padding: 6px 11px;
  font-size: 13px;
  border-radius: 8px;
}

/* ── Formulieren ───────────────────────────────────────────────────────────*/
label { font-weight: 600; font-size: 13.5px; color: var(--ink); }
input, select, textarea {
  border-color: var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 70, 230, .13);
}
.subpanel form.grid {
  background: #fafbfd;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 16px;
}

/* ── Tabellen ──────────────────────────────────────────────────────────────
   Kleine grijze koppen, dunne scheidingslijnen, en verder wit. De gekleurde
   rijen en de streep aan de zijkant zeiden hetzelfde als het label in de
   statuskolom; drie keer dezelfde mededeling maakt een tabel onrustig. */
.dossier-table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.dossier-table {
  border-radius: 0;
  background: transparent;
  font-size: 14px;
}
.dossier-table th {
  background: transparent;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .05em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.dossier-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}
.dossier-table tbody tr:hover td { background: #fafbfd; }
.dossier-table tbody tr td:first-child { border-left: 0; padding-left: 14px; }
.dossier-row--paid,
.dossier-row--open,
.dossier-row--aanmaning { background: transparent; }

/* Het dossiernummer is een kenmerk om te lezen, geen knop. */
.dossier-num {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
}
.dossier-debtor strong { font-weight: 600; }
.dossier-debtor span { color: var(--muted); font-size: 12.5px; }
.dossier-amount strong { font-weight: 650; }
.dossier-amount small { color: var(--muted); }
.overdue-date { color: #c62828; font-weight: 600; }

/* ── Overzichtsbalk boven de tabel ─────────────────────────────────────────*/
.dossier-summary-bar {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
}
.dsb-inner { display: flex; gap: 22px; align-items: center; padding: 12px 18px; flex-wrap: wrap; }
.dsb-stat { color: var(--muted); font-size: 13.5px; }
.dsb-stat strong { color: var(--ink); font-weight: 650; }
.dsb-amount { margin-left: auto; }

/* ── Tegels met kerncijfers ────────────────────────────────────────────────
   Zoals de tegels op het overzicht van de Control Hub: wit met een rand, het
   getal groot, het label klein en grijs eronder. */
.settings-overview { gap: 12px; }
.status-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  transition: none;
}
.status-card:before { display: none; }
.status-card:hover { transform: none; box-shadow: var(--shadow); }
.status-label { color: var(--faint); font-size: 11px; letter-spacing: .05em; }
.status-value { font-family: inherit; font-size: 20px; font-weight: 700; }
.status-meta { color: var(--muted); font-size: 12.5px; }

/* ── Labels ────────────────────────────────────────────────────────────────*/
.badge {
  min-width: 0;
  border: 0;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  background: var(--line-soft);
  color: var(--muted);
}
.badge:before { width: 6px; height: 6px; }
.badge.open { background: #fdf3e2; color: #b26a00; }
.badge.paid { background: #e7f6ee; color: #0f9d58; }

.reminder-count {
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  background: var(--line-soft);
  color: var(--muted);
}
.rc-warn { background: #fdf3e2; color: #b26a00; }
.rc-max  { background: #fdecec; color: #c62828; }
.followup-cell small { color: var(--muted); font-size: 12px; }

/* ── Meldingen ─────────────────────────────────────────────────────────────*/
.message {
  border-left-width: 1px;
  border-radius: 9px;
  box-shadow: none;
  font-weight: 500;
  font-size: 13.5px;
  padding: 11px 14px;
}
.message.info    { background: var(--accent-soft); border-color: var(--accent-line); color: #4535c9; }
.message.success { background: #e7f6ee; border-color: #cbeada; color: #0f9d58; }
.message.error   { background: #fdecec; border-color: #f6d2d2; color: #c62828; }

.empty {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
  border-radius: 10px;
}
.muted { color: var(--muted); }

/* ── Lijsten en losse blokken ──────────────────────────────────────────────*/
.item, .inbox-thread, .inbox-conversation, .template-card, .scheduler-card {
  background: var(--card);
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: none;
}
.item:hover, .inbox-thread:hover { border-color: var(--line); box-shadow: none; background: #fafbfd; }
.inbox-thread.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  box-shadow: none;
}
.integration-card { border-radius: 10px; box-shadow: none; }
.integration-card:hover { border-color: var(--accent-line); box-shadow: none; transform: none; }
.integration-icon { background: var(--accent-soft); color: var(--accent); border-radius: 9px; }

/* ── Tabbladen ─────────────────────────────────────────────────────────────*/
.view-tabs { background: #fff; border-color: var(--line); }
.view-tabs button {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 13.5px;
  padding: 7px 15px;
}
.view-tabs button:hover { background: #f4f6fa; color: var(--ink); }
.view-tabs button.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}

/* ── Wat kleiner scherm ────────────────────────────────────────────────────*/
@media (max-width: 860px) {
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .subpanel > .subheader, .subpanel > h3 { padding: 14px 16px; }
  .subpanel > * { margin-left: 16px; margin-right: 16px; }
  .dsb-inner { padding: 12px 16px; gap: 14px; }
  .dsb-amount { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Restanten van de oude opbouw die met negatieve marges en schaduwen werkten.
   Die trokken balken en kaders over de nieuwe kaarten heen.
   ════════════════════════════════════════════════════════════════════════════ */

/* De paginatitel was een balk over de volle breedte van een kaart die er niet
   meer is; nu gewoon een kop. */
.panel > h2 {
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 17px;
}

/* Tabel en overzichtsbalk lopen tot de rand van de kaart door: de lijnen
   sluiten dan aan op de kopregel erboven. */
.subpanel > .dossier-summary-bar,
.subpanel > .dossier-table-wrap,
.panel > .dossier-table-wrap {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-radius: 0;
  border: 0;
  border-top: 0;
  box-shadow: none;
}
.dossier-summary-bar { box-shadow: none; border-bottom: 1px solid var(--line); }
.dossier-summary-bar + .dossier-table-wrap { border-radius: 0; }
.dossier-table th:first-child, .dossier-table td:first-child { padding-left: 18px; }
.dossier-table th:last-child,  .dossier-table td:last-child  { padding-right: 18px; }

/* Knoppen in een rij zijn geen hoofdactie: één gevulde knop per scherm is
   genoeg, de rest krijgt een rand. */
.dossier-table .row-actions button,
.row-actions button.primary {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}
.dossier-table .row-actions button:hover,
.row-actions button.primary:hover { background: #f7f9fd; border-color: var(--line); }

/* De kaart met de gegevens van een eindklant staat al ín een kaart; die hoeft
   geen eigen kader en geen kleurvlak. */
.subpanel > div[style*="accent-soft"] {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ── De dossiers van één eindklant ─────────────────────────────────────────
   Als regels onder elkaar, uitgelijnd op kolommen, in plaats van als losse
   blokjes: dan lees je verticaal langs de bedragen en de data. */
.ec-doss-row {
  display: grid;
  grid-template-columns: 110px 1fr auto 110px 110px;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.ec-doss-row:last-child { border-bottom: 0; }
.ec-doss-row:hover { background: #fafbfd; }
.ec-doss-row > strong {
  min-width: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
}
.ec-doss-row > span:nth-child(3) { text-align: right; font-weight: 650; }
.ec-doss-row > span:nth-child(4) { text-align: right; }
.ec-doss-row > .badge { justify-self: end; }

/* Het kopje boven die lijst hoort bij de lijst, niet los te zweven. */
.subpanel p[style*="uppercase"] { margin-bottom: 4px !important; }

/* De browser toont een [hidden]-element toch zodra er een display-waarde op
   staat; grid uit de basisstijl wint anders van hidden. */
.settings-overview[hidden] { display: none !important; }