@font-face{font-family:"Archivo";src:url("fonts/archivo-standard.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
:root{--ink:#0e1a24;--steel:#1b2d3d;--paper:#f4f2ed;--card:#fff;--line:#dcdedb;--muted:#64717c;--orange:#ff5a1f;--green:#20a765;--amber:#e6a52f;--red:#d95a55;--radius:18px;--shadow:0 12px 34px rgba(14,26,36,.08);--display:"Anton","Arial Narrow",Impact,system-ui,sans-serif;--body:"Archivo",Arial,"Helvetica Neue",sans-serif;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box}html{font-family:var(--body);color:var(--ink);background:var(--paper)}body{margin:0;min-height:100vh}button,input,select{font:inherit}button,a{transition:transform .16s ease,background .16s ease,border-color .16s ease}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(255,90,31,.35);outline-offset:2px}.is-hidden{display:none!important}.muted{color:var(--muted);line-height:1.55}.eyebrow{margin:0 0 7px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#496072}.eyebrow--light{color:#b7c4ce}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.03em}h2,h3{font-family:var(--display);font-weight:600}h2{font-size:1.55rem;margin-bottom:0}.button{min-height:44px;border:0;border-radius:999px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;text-decoration:none;cursor:pointer}.button:hover{transform:translateY(-1px)}.button--primary{background:var(--orange);color:#111}.button--secondary{background:#edf0f1;color:var(--ink)}.button--light{background:#fff;color:var(--ink)}.text-button{border:0;background:none;color:#34566f;font-weight:800;cursor:pointer;padding:4px}.icon-button{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:1.7rem;cursor:pointer}
.login{min-height:100vh;display:grid;grid-template-columns:minmax(280px,1fr) minmax(380px,540px);gap:8vw;align-items:center;padding:8vw;background:var(--ink);background-image:linear-gradient(rgba(14,26,36,.92),rgba(14,26,36,.92)),var(--grain);background-size:auto,160px;color:#fff}.login:before{content:"";position:fixed;inset:0 45% 0 0;background:radial-gradient(circle at 30% 45%,rgba(255,90,31,.18),transparent 46%),linear-gradient(135deg,transparent 48%,rgba(255,255,255,.03) 48% 49%,transparent 49%)}.login__brand{position:relative;font-family:var(--display);font-size:2.2rem;font-weight:900;display:flex;align-items:center;gap:18px}.brand-mark{width:34px;height:34px;overflow:visible;flex:none}.brand-mark__arc{stroke:#f4f2ed}.brand-mark__dot{fill:var(--orange)}.login__card{position:relative;background:#fff;color:var(--ink);padding:42px;border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.24)}.login__card h1{font-family:var(--display);font-weight:600;font-size:2.15rem;line-height:1.05;margin-bottom:14px}.login label,.password-dialog label{display:grid;gap:7px;font-size:.82rem;font-weight:800;margin-top:18px}.login input,.password-dialog input,.filters input,.filters select,.detail select,.range select{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 13px;color:var(--ink)}.login .button{width:100%;margin-top:20px}.form-error{color:#b93832;min-height:20px;font-size:.84rem;margin:12px 0 0}
.shell{display:grid;grid-template-columns:238px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--ink);background-image:linear-gradient(rgba(14,26,36,.92),rgba(14,26,36,.92)),var(--grain);background-size:auto,160px;color:#fff;padding:28px 20px 22px;display:flex;flex-direction:column}.sidebar__brand{color:#fff;text-decoration:none;font-family:var(--display);font-size:1.32rem;font-weight:900;display:flex;align-items:center;gap:10px;padding:4px 10px 30px}.sidebar__brand .brand-mark{width:25px;height:25px}.nav{display:grid;gap:7px}.nav__group-label{margin:14px 10px 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5c7080}.nav__item{display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:12px;background:transparent;color:#b9c6cf;padding:13px 14px;text-align:left;font-weight:700;cursor:pointer}.nav__item span{font-size:1.15rem;width:20px;text-align:center}.nav__item:hover,.nav__item.is-active{background:var(--steel);color:#fff}.sidebar__foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:20px 8px 0}.account{display:flex;gap:10px;align-items:center;margin-bottom:14px}.account__avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#111;font-weight:900}.account span:last-child{display:grid}.account small{color:#8fa0ac;margin-top:3px;max-width:135px;overflow:hidden;text-overflow:ellipsis}.sidebar__foot .text-button{color:#b9c6cf}
.workspace{min-width:0}.topbar{height:102px;background:rgba(244,242,237,.92);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.topbar h1{font-family:var(--display);font-weight:600;font-size:1.7rem;margin:0}.topbar .eyebrow{margin-bottom:3px}.range{font-size:.74rem;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:9px}.range select{padding:9px 32px 9px 11px}.menu-button{display:none;border:0;background:none;font-size:1.4rem}main{padding:34px 38px 60px;max-width:1500px}.savings-card{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);background-image:linear-gradient(rgba(14,26,36,.94),rgba(14,26,36,.94)),var(--grain);background-size:auto,160px;color:#fff;border-radius:var(--radius);padding:30px 30px 26px;box-shadow:var(--shadow);margin-bottom:18px}.savings-card__glow{position:absolute;z-index:-1;left:-8%;bottom:-55%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.4),transparent 68%);filter:blur(6px);animation:savingsPulse 4.8s ease-in-out infinite}.savings-card--empty .savings-card__glow{background:radial-gradient(circle,rgba(255,90,31,.16),transparent 68%)}.savings-card__amount{display:block;font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums lining-nums;font-size:clamp(2.6rem,5vw,4.1rem);line-height:1;margin:6px 0 12px;color:#fff}.savings-card__sub{margin:0;max-width:640px;color:#c3ced7;font-size:.86rem;line-height:1.55}@keyframes savingsPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.1)}}@media(prefers-reduced-motion:reduce){.savings-card__glow{animation:none;opacity:.7}}.attention-card{background:var(--steel);color:#fff;border-radius:var(--radius);padding:25px 28px;display:flex;justify-content:space-between;align-items:end;box-shadow:var(--shadow);margin-bottom:18px}.attention-card div{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:end}.attention-card .eyebrow{grid-column:1/-1}.attention-card strong{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums lining-nums;font-size:3rem;line-height:.9;color:var(--orange)}.attention-card span{color:#cad4db;padding-bottom:4px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 7px 20px rgba(14,26,36,.04);display:grid;grid-template-columns:auto 1fr;column-gap:12px}.metric__icon{grid-row:1/4;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:900}.metric__icon--call{background:#ffebe4;color:#c64216}.metric__icon--sms{background:#e8f4ef;color:#11734b}.metric__icon--reply{background:#e9eef7;color:#355c91}.metric__icon--web{background:#f6efda;color:#89630d}.metric p{font-size:.8rem;color:var(--muted);margin:0}.metric strong{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums lining-nums;font-size:1.85rem;line-height:1.05}.metric small{color:#8a949c}.overview-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 7px 20px rgba(14,26,36,.04)}.panel__head{display:flex;align-items:end;justify-content:space-between;margin-bottom:17px}.panel__head h2{font-size:1.25rem}.contact-list{display:grid}.contact-row{border-top:1px solid #eceeec;padding:14px 2px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;cursor:pointer}.contact-row:first-child{border-top:0}.channel-dot{width:38px;height:38px;border-radius:50%;background:#edf1f2;display:grid;place-items:center;font-weight:900;color:#375265}.contact-row__main{min-width:0}.contact-row__main b,.contact-row__main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-row__main small{color:var(--muted);margin-top:4px}.status{display:inline-flex;align-items:center;border-radius:999px;padding:6px 9px;font-size:.72rem;font-weight:800;white-space:nowrap}.status--new{background:#fff0e9;color:#a63b14}.status--follow_up{background:#fff5dc;color:#79570a}.status--contacted{background:#e8f5ef;color:#14724c}.status--closed{background:#edf0f1;color:#52616b}.timeline{display:grid}.timeline-item{position:relative;padding:4px 0 18px 32px}.timeline-item:before{content:"";position:absolute;left:10px;top:11px;bottom:-3px;width:1px;background:#dde2e3}.timeline-item:last-child:before{display:none}.timeline-item:after{content:"";position:absolute;left:5px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px #ffede6}.timeline-item b{display:block;font-size:.88rem}.timeline-item p{margin:4px 0 0;color:var(--muted);font-size:.82rem;line-height:1.42}.timeline-item time{display:block;color:#94a0a8;font-size:.7rem;margin-top:4px}.empty{padding:30px 10px;text-align:center;color:var(--muted)}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section-heading h2{font-size:2rem}.filters{display:grid;grid-template-columns:minmax(260px,1fr) 220px;gap:14px;align-items:end;margin-bottom:16px}.filters label{font-size:.76rem;font-weight:800;color:var(--muted);display:grid;gap:6px}.search{position:relative}.search span{position:absolute;left:12px;bottom:12px}.search input{padding-left:34px}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#71808b;padding:11px 10px;border-bottom:1px solid var(--line)}td{padding:14px 10px;border-bottom:1px solid #eceeec;font-size:.87rem}tbody tr{cursor:pointer}tbody tr:hover{background:#fafaf8}.contact-cell b,.contact-cell small{display:block}.contact-cell small{color:var(--muted);margin-top:4px}.table-arrow{text-align:right;color:#83909a}.mobile-contact-list{display:none}.connection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.connection{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;gap:15px}.connection__mark{flex:0 0 42px;height:42px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900}.connection h3{margin-bottom:8px}.connection p{color:var(--muted);font-size:.88rem;line-height:1.5}.connection__status{font-size:.75rem;font-weight:800;color:#8a5f09;background:#fff3d9;border-radius:999px;padding:6px 9px;display:inline-block}.connection.is-connected .connection__status{color:#136f49;background:#e5f5ed}.explainer{margin-top:20px;background:var(--steel);color:#fff;border-radius:var(--radius);padding:26px;max-width:850px}.explainer h3{font-size:1.55rem;margin-bottom:8px}.explainer p:last-child{color:#c8d3db;line-height:1.65;margin-bottom:0}
.detail{width:min(620px,calc(100% - 30px));max-height:88vh;border:0;border-radius:22px;padding:27px;box-shadow:0 30px 100px rgba(0,0,0,.3)}.detail::backdrop,.password-dialog::backdrop{background:rgba(7,15,22,.62);backdrop-filter:blur(4px)}.detail__head{display:flex;justify-content:space-between;gap:20px}.detail__head h2{font-size:1.8rem}.detail__actions{display:flex;gap:10px;margin:20px 0}.detail__status{display:grid;gap:6px;font-size:.75rem;font-weight:800;color:var(--muted);margin-bottom:25px}.timeline--detail{border-top:1px solid var(--line);padding-top:20px}.password-dialog{border:0;border-radius:22px;padding:30px;width:min(450px,calc(100% - 30px))}.password-dialog h2{font-size:1.7rem}.password-dialog .button{width:100%;margin-top:18px}
.admin-heading{align-items:center}.provision-line{display:flex;align-items:center;background:var(--ink);color:#fff;border-radius:var(--radius);padding:18px 22px;margin-bottom:20px;box-shadow:var(--shadow)}.provision-line span{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:.76rem;font-weight:800}.provision-line b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#101820}.provision-line i{height:1px;background:#486072;flex:1;margin:0 12px}.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tenant-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 7px 20px rgba(14,26,36,.04)}.tenant-card__head{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px}.tenant-card h3{font-size:1.25rem;margin-bottom:5px}.tenant-code{font:700 .74rem ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}.tenant-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:17px}.tenant-stats span{background:#f5f6f4;border-radius:11px;padding:11px;font-size:.73rem;color:var(--muted)}.tenant-stats b{display:block;font-size:1.1rem;color:var(--ink);margin-bottom:2px}.integration-pills{display:flex;gap:7px;flex-wrap:wrap}.integration-pill{font-size:.7rem;font-weight:800;border-radius:999px;padding:6px 9px;background:#fff2d8;color:#805a08}.integration-pill.is-connected{background:#e5f5ed;color:#136f49}.tenant-dialog{width:min(760px,calc(100% - 30px));max-height:92vh;border:0;border-radius:24px;padding:32px;box-shadow:0 30px 100px rgba(0,0,0,.32)}.tenant-dialog::backdrop{background:rgba(7,15,22,.66);backdrop-filter:blur(4px)}.tenant-dialog h2{font-size:1.8rem;margin-bottom:8px}.tenant-dialog label{display:grid;gap:7px;font-size:.78rem;font-weight:800;color:#40515e}.tenant-dialog input{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 13px;color:var(--ink)}.tenant-dialog fieldset{border:1px solid var(--line);border-radius:15px;padding:17px;margin:21px 0 5px}.tenant-dialog legend{padding:0 8px;font-size:.76rem;font-weight:900;color:#415663}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-span{grid-column:1/-1}.tenant-dialog form>.button{margin-top:7px}.credential-result{padding:8px}.credential-result pre{white-space:pre-wrap;word-break:break-word;background:var(--ink);color:#dce8ed;border-radius:15px;padding:20px;line-height:1.55;font:700 .78rem ui-monospace,SFMono-Regular,Consolas,monospace;max-height:48vh;overflow:auto}.result-actions{display:flex;gap:10px;margin-top:18px}
.twilio-config{margin-top:17px;border-top:1px solid #eceeec;padding-top:13px}.twilio-config summary{cursor:pointer;color:#36566c;font-size:.76rem;font-weight:900}.twilio-config form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.twilio-config label{display:grid;gap:5px;font-size:.7rem;font-weight:800;color:var(--muted)}.twilio-config label:nth-child(3){grid-column:1/-1}.twilio-config input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px}.twilio-config .button{justify-self:start;min-height:38px}.twilio-config .form-error{grid-column:1/-1}
.health-card{display:flex;flex-direction:column}.health-rows{display:grid;gap:8px;margin-top:14px}.health-row{display:grid;grid-template-columns:auto auto;gap:6px 10px;align-items:center;padding:10px 12px;border-radius:11px;background:#f5f6f4;font-size:.8rem}.health-row__label{font-weight:800;color:var(--ink)}.health-row__status{font-weight:800;border-radius:999px;padding:3px 9px;font-size:.7rem;white-space:nowrap;justify-self:end;background:#edf0f1;color:#52616b}.health-row__detail{grid-column:1/-1;color:var(--muted)}.health-row--ok .health-row__status{background:#e5f5ed;color:#136f49}.health-row--warning .health-row__status{background:#fff3d9;color:#8a5f09}.health-row--error .health-row__status{background:#fbe7e6;color:#a7302b}.health-activity{margin-top:12px;font-size:.78rem}

/* Activiteitenlog: premium, editoriale tijdlijn */
.activity-actions{display:flex;gap:10px;align-items:center}
.activity-day{margin-bottom:32px}
.activity-day:first-child{margin-top:4px}
.activity-day__heading{display:flex;align-items:center;gap:14px;font-size:1.05rem;font-weight:900;letter-spacing:-.01em;color:var(--ink);text-transform:capitalize;margin-bottom:16px}
.activity-day__heading:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.activity-entries{display:grid;gap:12px}
.activity-entry{background:linear-gradient(180deg,#fff,var(--card) 40%);border:1px solid var(--line);border-left:4px solid var(--steel);border-radius:14px;padding:16px 20px;box-shadow:0 6px 18px rgba(14,26,36,.05)}
.activity-entry__head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.activity-entry__head h4{margin:0;font-size:.98rem;font-weight:800;color:var(--ink)}
.activity-entry__badge{font-size:.66rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#edf0f1;color:#52616b;white-space:nowrap}
.activity-entry p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.55}
.activity-entry--beslissing{border-left-color:#355c91}.activity-entry--beslissing .activity-entry__badge{background:#e9eef7;color:#355c91}
.activity-entry--bouwwerk{border-left-color:var(--orange)}.activity-entry--bouwwerk .activity-entry__badge{background:#ffece2;color:#c64216}
.activity-entry--fix{border-left-color:var(--red)}.activity-entry--fix .activity-entry__badge{background:#fbe7e6;color:#a7302b}
.activity-entry--test{border-left-color:var(--green)}.activity-entry--test .activity-entry__badge{background:#e5f5ed;color:#136f49}
.activity-entry--onderzoek{border-left-color:#7a5cc2}.activity-entry--onderzoek .activity-entry__badge{background:#efe9fa;color:#5f3fae}
.activity-entry--infra{border-left-color:var(--muted)}.activity-entry--infra .activity-entry__badge{background:#edf0f1;color:#52616b}
.tenant-dialog textarea,.tenant-dialog select{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 13px;color:var(--ink);font:inherit;resize:vertical}

/* Bewijslog: hergebruikt .panel/.timeline, alleen intro + inklapbare lijst */
.proof-log{margin-top:20px}
.proof-log__intro{max-width:760px;line-height:1.6}
.proof-log__toggle{cursor:pointer;color:#36566c;font-size:.8rem;font-weight:900;margin-top:14px;list-style:none}
.proof-log__toggle::-webkit-details-marker{display:none}
.proof-log__toggle::before{content:"▸ ";display:inline-block;transition:transform .16s ease}
details[open]>.proof-log__toggle::before{transform:rotate(90deg)}
.proof-log__list{margin-top:16px}

/* Partners: eigen achterban van een tenant, om leads handmatig naar door te zetten */
.partners-panel{margin-top:20px}
.partners-form{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.partners-form input{flex:1 1 160px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 13px;color:var(--ink);font:inherit}
.partners-form .button{flex:0 0 auto}
.partner-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.partner-row:first-child{border-top:0}
.partner-row b{display:block}
.partner-row small{color:var(--muted)}
.detail__refer{border-top:1px solid var(--line);padding-top:16px;margin-bottom:20px;display:grid;gap:10px}
.detail__refer label{display:grid;gap:6px;font-size:.75rem;font-weight:800;color:var(--muted)}
.detail__refer>.button{justify-self:start}
.forward-compose{margin-top:4px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#f7f8f6;display:grid;gap:11px}
.forward-compose__to{margin:0;font-size:.82rem;font-weight:800;color:var(--ink)}
.forward-compose textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:.9rem;line-height:1.5;resize:vertical;background:#fff;color:var(--ink)}
.forward-compose__note{margin:0;font-size:.76rem;color:var(--muted);min-height:1em}
.forward-compose__actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.button--whatsapp{background:#25d366;color:#08331b}
.button--whatsapp:hover{background:#1fbb59}
.button:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Kennisbank: zoekbalk + categoriefilter + lijst links, gelezen document rechts */
.knowledge-layout{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
#knowledgeGraphView.knowledge-layout{grid-template-columns:1fr 360px}
.knowledge-sidebar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:sticky;top:14px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;gap:12px}
.knowledge-sidebar input{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px 13px 10px 34px;color:var(--ink);font:inherit}
.knowledge-categories{display:flex;flex-wrap:wrap;gap:6px}
.knowledge-pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-size:.75rem;font-weight:700;color:var(--muted);cursor:pointer}
.knowledge-pill.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.knowledge-count{margin:0;font-size:.75rem}
.knowledge-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.knowledge-item{display:block;width:100%;text-align:left;border:0;background:none;border-radius:10px;padding:9px 10px;cursor:pointer}
.knowledge-item:hover{background:#f4f3ef}
.knowledge-item.is-active{background:#eef0ec}
.knowledge-item b{display:block;font-size:.86rem}
.knowledge-item small{display:block;color:var(--muted);font-size:.72rem;margin-top:1px}
.knowledge-snippet{display:block;color:var(--muted);font-size:.75rem;margin-top:3px;line-height:1.4}
.knowledge-doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;min-height:400px}
.knowledge-doc__head{border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:14px}
.knowledge-doc__head h2{font-size:1.6rem;margin-top:4px}
.knowledge-doc__body{line-height:1.65;max-width:74ch}
.knowledge-doc__body h1,.knowledge-doc__body h2,.knowledge-doc__body h3,.knowledge-doc__body h4{margin:22px 0 8px}
.knowledge-doc__body h1:first-child,.knowledge-doc__body h2:first-child{margin-top:0}
.knowledge-doc__body p{margin:0 0 12px}
.knowledge-doc__body ul{margin:0 0 12px;padding-left:20px}
.knowledge-doc__body code{background:#f4f3ef;padding:.1em .35em;border-radius:5px;font-size:.9em}
.knowledge-doc__body pre{background:#f4f3ef;border-radius:10px;padding:16px 18px;overflow-x:auto;margin:0 0 12px;max-width:100%}
.knowledge-doc__body pre code{background:none;padding:0;font-size:.82rem;line-height:1.55;white-space:pre}
.knowledge-doc__body blockquote{margin:0 0 12px;padding:2px 0 2px 16px;border-left:3px solid var(--line);color:var(--muted)}
.knowledge-doc__body blockquote p{margin:0 0 6px}
.knowledge-doc__body blockquote p:last-child{margin-bottom:0}

/* Kennisbank: Graaf-weergave — donkere orbit-canvas, zelfde "second brain"-idee als de
   lijst maar ruimtelijk, gebouwd op de echte, geanalyseerde documentrelaties. */
.knowledge-staleness{margin:0 0 16px;padding:9px 14px;border-radius:8px;font-size:.82rem;display:flex;align-items:center;gap:8px}
.knowledge-staleness::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.knowledge-staleness.is-clean{background:#eef7f0;color:#2f6b45}
.knowledge-staleness.is-clean::before{background:#3fa85c}
.knowledge-staleness.is-flagged{background:#fdf1e8;color:#9a5220}
.knowledge-staleness.is-flagged::before{background:var(--accent, #ff5c1a)}
.knowledge-mode-toggle{display:flex;gap:2px;background:#eceae4;border-radius:999px;padding:3px;align-self:start}
.knowledge-mode-btn{border:0;background:none;border-radius:999px;padding:7px 16px;font:inherit;font-weight:800;font-size:.8rem;color:var(--muted);cursor:pointer}
.knowledge-mode-btn.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.knowledge-graph-wrap{position:relative;background:#070b11;border-radius:var(--radius);overflow:hidden;min-height:560px;height:calc(100vh - 260px)}
.knowledge-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.knowledge-canvas.is-dragging{cursor:grabbing}
.knowledge-canvas.is-pointer{cursor:pointer}
.knowledge-edge-evidence{
  position:absolute;max-width:270px;background:#0f1822;border:1px solid rgba(143,163,176,.3);
  border-radius:10px;padding:12px 14px;z-index:3;box-shadow:0 12px 28px -12px rgba(0,0,0,.6);
  animation:knowledge-evidence-in .16s ease both;
}
@keyframes knowledge-evidence-in{from{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:none}}
.knowledge-edge-evidence__close{position:absolute;top:6px;right:8px;background:none;border:0;color:#8fa3b0;font-size:1rem;line-height:1;cursor:pointer;padding:2px}
.knowledge-edge-evidence__type{margin:0 0 6px;font:800 9.5px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--evidence-color,#72dcff)}
.knowledge-edge-evidence__reason{margin:0;font-size:.78rem;line-height:1.5;color:#dbe6ec;padding-right:12px}
.knowledge-zoom{position:absolute;bottom:14px;right:14px;z-index:2;display:flex;gap:4px}
.knowledge-zoom button{width:30px;height:30px;border-radius:8px;border:1px solid rgba(143,163,176,.3);background:rgba(255,255,255,.06);color:#e8f2f8;font-size:1.1rem;line-height:1;cursor:pointer}
.knowledge-zoom button:hover{background:rgba(255,255,255,.14)}
.knowledge-graph-back{position:absolute;top:14px;left:14px;z-index:2}
.knowledge-layout-switch{position:absolute;top:14px;right:14px;z-index:2;display:flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(143,163,176,.22);border-radius:999px;padding:3px;backdrop-filter:blur(6px)}
.knowledge-layout-chip{border:0;background:none;border-radius:999px;padding:6px 12px;font:700 11px/1 system-ui,sans-serif;color:#8fa3b0;cursor:pointer;white-space:nowrap}
.knowledge-layout-chip.is-active{background:#fff;color:#0a1017}
.knowledge-graph-hint{position:absolute;bottom:14px;left:14px;z-index:2;color:#8fa3b0;font-size:.75rem;margin:0;max-width:60%}
#knowledgeGraphDoc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;min-height:560px;max-height:calc(100vh - 260px);overflow-y:auto}
#knowledgeGraphDoc .knowledge-related{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
#knowledgeGraphDoc .knowledge-related h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
#knowledgeGraphDoc .knowledge-related ul{list-style:none;display:flex;flex-direction:column;gap:8px}
#knowledgeGraphDoc .knowledge-related button{border:0;background:none;text-align:left;color:#36566c;font:inherit;font-size:.85rem;cursor:pointer;padding:0}
#knowledgeGraphDoc .knowledge-related button:hover{text-decoration:underline}
#knowledgeGraphDoc .knowledge-related small{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}

/* Zichtbaarheid: Clarity-metingen als kaarten, zelfde taal als Systeemcheck */
.visibility-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:6px}
.visibility-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 7px 20px rgba(14,26,36,.04)}
.visibility-card h3{font-size:1.02rem;margin-bottom:4px}
.visibility-hint{color:var(--muted);font-size:.8rem;line-height:1.5;margin-bottom:14px}
.visibility-empty{font-size:.83rem;margin:0}
.visibility-card--wide{grid-column:1/-1}
.visibility-rows{display:grid;gap:10px}
.visibility-rows--friction{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.visibility-row{display:flex;flex-wrap:wrap;gap:14px 22px;padding:12px;border-radius:11px;background:#f5f6f4}
.visibility-row span{display:flex;flex-direction:column-reverse;gap:2px;font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.visibility-row b{font-size:1.15rem;font-weight:900;color:var(--ink);text-transform:none;letter-spacing:normal}

/* Hulp: klantvragenformulier */
.support-panel{max-width:640px}
.support-panel form{display:grid;gap:16px}
.support-panel label{display:grid;gap:7px;font-size:.82rem;font-weight:800;color:#40515e}
.support-panel input,.support-panel textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 13px;color:var(--ink);font:inherit;resize:vertical}
.support-panel .button{justify-self:start}
.form-success{color:#136f49;background:#e5f5ed;border-radius:11px;padding:10px 14px;font-size:.84rem;margin:12px 0 0}
.login__forgot{display:block;margin-top:10px;padding:0;text-align:left;font-size:.8rem}
.login__help{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;text-align:center}
.login__help a{color:#34566f;font-weight:800;text-decoration:none}
.detail__danger{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);text-align:right}
.text-button--danger{color:#b93832}
.checkbox-label{display:flex!important;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:9px;margin-top:16px;font-size:.84rem!important;font-weight:700!important;color:#40515e;cursor:pointer}
.checkbox-label input{width:auto!important;accent-color:var(--orange)}
.reset-page{min-height:100vh;display:grid;place-items:center;background:var(--ink);background-image:linear-gradient(rgba(14,26,36,.92),rgba(14,26,36,.92)),var(--grain);background-size:auto,160px;padding:8vw 18px}
.reset-card{position:relative;background:#fff;color:var(--ink);padding:42px;border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.24);width:min(440px,100%)}
.reset-card h1{font-family:var(--display);font-weight:600;font-size:1.7rem;line-height:1.15;margin-bottom:10px}
.reset-card label{display:grid;gap:7px;font-size:.82rem;font-weight:800;margin-top:18px}
.reset-card input{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 13px;color:var(--ink)}
.reset-card .button{width:100%;margin-top:20px}
.reset-page .login__brand{position:relative;justify-content:center;margin-bottom:26px}
.reset-note{font-size:.84rem;line-height:1.5}
.reset-note a{color:#E6480C;font-weight:800;text-decoration:none}
@media(max-width:560px){.activity-actions{flex-direction:column;align-items:stretch}}
@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}.connection-grid{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}.login{grid-template-columns:1fr}.login:before,.login__brand{display:none}.knowledge-layout{grid-template-columns:1fr}.knowledge-sidebar{position:static;max-height:none}.knowledge-list{max-height:340px}.knowledge-graph-wrap{height:420px}#knowledgeGraphDoc{max-height:none}}
@media(max-width:760px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-250px;z-index:30;width:238px;transition:left .2s ease}.shell.menu-open .sidebar{left:0}.topbar{height:84px;padding:0 18px;justify-content:flex-start;gap:14px}.menu-button{display:block}.topbar .range{margin-left:auto}.topbar h1{font-size:1.3rem}main{padding:22px 16px 45px}.attention-card{align-items:stretch;gap:20px;flex-direction:column}.metrics{grid-template-columns:1fr 1fr}.metric{padding:15px}.metric__icon{display:none}.panel{padding:17px}.filters{grid-template-columns:1fr}.table-wrap{display:none}.mobile-contact-list{display:grid}.connection{padding:18px}.login{padding:18px}.login__card{padding:28px}.detail{padding:21px}.detail__actions .button{flex:1}.admin-heading{align-items:stretch;gap:16px;flex-direction:column}.provision-line{align-items:flex-start;gap:10px;flex-direction:column}.provision-line i{width:1px;height:12px;margin:0 0 0 13px}.form-grid{grid-template-columns:1fr}.form-span{grid-column:auto}.tenant-dialog{padding:22px}.result-actions{flex-direction:column}}
@media(max-width:440px){.metrics{grid-template-columns:1fr}.range{font-size:0}.range select{font-size:.8rem}.attention-card strong{font-size:2.5rem}.savings-card{padding:24px 22px 22px}.contact-row{grid-template-columns:36px minmax(0,1fr)}.contact-row .status{grid-column:2;justify-self:start}.channel-dot{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Meldingenkaart (Overzicht). Zelfde vormtaal als .attention-card, maar op papier
   i.p.v. staal: dit is een uitnodiging, geen alarm. */
.push-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;gap:18px 24px;align-items:center}
.push-card__text{display:grid;gap:5px;min-width:0}
.push-card__text strong{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.25}
.push-card__text .muted{font-size:.92rem;line-height:1.5}
.push-card__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
/* Als elke knop erin verborgen is (installeren geweigerd), mag de container geen
   grid-gap meer opeisen; anders blijft er een gat staan waar de knop stond. */
.push-card__actions:not(:has(> :not(.is-hidden))){display:none}
.push-card__actions .button{width:auto;margin-top:0}
.push-card__status{grid-column:1/-1;margin:0;font-size:.9rem;line-height:1.5;color:var(--muted)}
.push-card__status:empty{display:none}
.push-card__status[data-kind=ok]{color:var(--green)}
.push-card__status[data-kind=error]{color:var(--red)}

@media(max-width:760px){
  /* Op een telefoon onder elkaar en de knop volle breedte: dit is de doelgroep die
     hem met een werkhandschoen aan moet raken. */
  .push-card{grid-template-columns:1fr;padding:20px}
  .push-card__actions{justify-content:stretch}
  .push-card__actions .button{width:100%}
}

/* Belbalk na een tik op "Bel terug" in een melding. Onderaan vastgezet en met een groot
   raakoppervlak: de gebruiker is een vakman die dit met een werkhandschoen aan moet
   kunnen raken, en hij verwacht te bellen, niet te lezen. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;align-items:center;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:var(--ink);box-shadow:0 -10px 30px rgba(14,26,36,.35)}
.callbar__link{flex:1;min-height:56px;font-size:1.05rem;width:auto;margin-top:0}
.callbar__dismiss{color:#b9c6cf;flex:none;padding:10px}
/* Versie-uitlezing van de app-laag: bewust klein en onopvallend, het is diagnostiek en
   geen boodschap voor de klant. Wordt alleen opvallend als er iets stuk is. */
.push-card__status--sw{font-size:.8rem;color:#8a95a0}
.push-card__status--sw[data-kind=error]{color:var(--red);font-weight:700}
.push-card__status--sw[data-kind=ok]{color:#8a95a0}

/* Knoppenrij onder een dialoog: annuleren naast opslaan, niet eronder. */
.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:22px}
.dialog-actions .button{margin-top:0}

/* ═══════════════════════════════════════════════════════════════════════════
   BRUTALISME-LAAG (2026-08-22)
   Trekt het dashboard in dezelfde taal als de site: sites/belvanger/site/css/brutal.css.

   WAAROM EEN LAAG ERACHTER EN NIET 216 REGELS HERSCHREVEN
   Het stylesheet erboven is dicht opeengepakt en stuurt een dashboard met veel
   toestanden aan. Elke regel aanpassen is een grote kans op stille breuk voor
   weinig winst: het meeste zit al in tokens (--radius, --shadow, --display,
   kleuren). Die worden hieronder overschreven, en daarna alleen de plekken waar
   een ronding of randdikte HARDCODED stond. Wat hier niet genoemd wordt, is
   bewust ongemoeid gelaten.

   DRIE REGELS UIT HET SITE-SYSTEEM DIE HIER OOK GELDEN
   1. Anton heeft EEN gewicht en geen breedte-as. font-weight 700/800/900 erop
      laat de browser nep-vet synthetiseren en smeert de letter dicht.
   2. Anton's kapitalen zijn .857em hoog. Een regelhoogte onder ~.99 laat regels
      elkaar raken. Vandaar --lh-kop.
   3. Wit op #FF5C1A is 3,09:1 en zakt onder AA. Donkere merkinkt erop is 5,18:1.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Anton";
  src: url("fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Exact de merkkleuren van de site. Het portaal zat er net naast
     (#0e1a24 i.p.v. #16232E, #ff5a1f i.p.v. #FF5C1A): net genoeg verschil om
     naast elkaar als twee producten te lezen. */
  --ink: #16232E;
  --steel: #1E3140;
  --paper: #ECEAE4;
  --card: #FAF9F6;
  --line: #16232E;
  --muted: #6B7078;
  --orange: #FF5C1A;
  --green: #1FA855;

  --radius: 0;
  --shadow: 6px 6px 0 var(--ink);
  /* --display staat bovenaan dit bestand en wijst daar al naar Anton;
     een token hoort op een plek te staan, dus hier niet nog eens. */
  --display-ui: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --lh-kop: 1.12;
}

/* ---- vorm: alles vierkant ------------------------------------------------ */
/* Bewust opgesomd in plaats van een `* { border-radius: 0 }`: zo blijft
   zichtbaar WAT er vierkant is gemaakt, en breekt er niets dat later bijkomt. */
.button, .icon-button, .login__card, .password-dialog, .detail, .tenant-dialog,
.login input, .password-dialog input, .filters input, .filters select,
.detail select, .range select, .tenant-dialog input, .tenant-dialog textarea,
.tenant-dialog select, .tenant-dialog fieldset, .twilio-config input,
.metric__icon, .connection__mark, .account__avatar, .channel-dot,
.nav__item, .status, .integration-pill, .connection__status,
.tenant-stats span, .health-row, .health-row__status, .activity-entry,
.activity-entry__badge, .provision-line b, .credential-result pre,
.savings-card, .attention-card, .metric, .panel, .connection, .explainer,
.provision-line, .tenant-card {
  border-radius: 0;
}
/* De ronde stip in de tijdlijn wordt een blokje: hij markeert een moment, en
   een vierkant markeert dat net zo goed. */
.timeline-item:after { border-radius: 0; box-shadow: 0 0 0 3px var(--paper); background: var(--orange); }

/* ---- randen: 2px, en inkt in plaats van beige ---------------------------- */
.metric, .panel, .connection, .tenant-card, .health-card,
.login input, .password-dialog input, .filters input, .filters select,
.detail select, .range select, .tenant-dialog input, .tenant-dialog textarea,
.tenant-dialog select, .twilio-config input {
  border: 2px solid var(--line);
}
.metric, .panel, .connection, .tenant-card { box-shadow: none; }
.topbar { border-bottom: 2px solid var(--line); }
.timeline--detail { border-top: 2px solid var(--line); }
.tenant-dialog fieldset { border: 2px solid var(--line); }

/* ---- typografie ---------------------------------------------------------- */
/* Anton alleen voor de grote getallen en paginakoppen. Paneelkoppen krijgen
   Archivo in hoofdletters: op 1,25rem is een condensed display-letter niet
   leesbaarder, alleen luider. */
/* STANDAARD is Archivo; Anton is de UITZONDERING, niet andersom.
   De eerste opzet had het omgekeerd: Anton bleef de default uit het originele
   `h2,h3{font-family:var(--display);font-weight:600}` en er stond een LIJSTJE
   van koppen die Archivo kregen. Elke kop die niet in dat lijstje stond kreeg
   dus Anton MET gewicht 600, en Anton heeft er maar een (400): de browser
   synthetiseert dan nep-vet en smeert de letter dicht.
   Zichtbaar geworden op de Zichtbaarheid-pagina, waar de paneelkoppen
   ("Bezoekersverkeer", "Scrolldiepte", ...) door app.js worden gemaakt en dus
   per definitie nooit in zo'n lijstje konden staan.
   Nu kan het niet meer stilletjes fout gaan: wie een kop toevoegt krijgt
   Archivo, en dat is altijd leesbaar. Anton moet je expliciet aanvragen.
   h4 blijft met rust: dat zijn de titels in het activiteitenlog en die zijn
   te lang voor hoofdletters. */
h1, h2, h3 { letter-spacing: 0; }
h2, h3 {
  font-family: var(--display-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.topbar h1, .section-heading h2, .login__card h1, .detail__head h2,
.password-dialog h2, .tenant-dialog h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: var(--lh-kop); letter-spacing: .002em; padding-top: .1em;
}
.panel__head h2, .connection h3, .tenant-card h3, .explainer h3 {
  font-family: var(--display-ui); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1rem; line-height: 1.2;
}
.savings-card__amount, .attention-card strong, .metric strong {
  font-family: var(--display); font-weight: 400; letter-spacing: .002em;
}
.login__brand, .sidebar__brand {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
}
/* Deze twee stonden nog op gewicht 600 met Anton, gevonden door alle
   var(--display)-regels na te lopen op hun font-weight. Doe dat opnieuw als je
   een kop toevoegt:  grep -oE '[^{}]+\{[^}]*var\(--display\)[^}]*\}' style.css */
.reset-card h1, .push-card__text strong {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: var(--lh-kop); letter-spacing: .002em;
}

/* ── VANGNET TEGEN NEP-VET ─────────────────────────────────────────────────
   Anton heeft EEN gewicht (400). Vraagt een regel om 600/800/900, dan tekent de
   browser zelf een vette variant door de letter uit te smeren. Dat ziet er niet
   uit als een fout maar als een lelijk font, en het is daardoor twee keer door
   de controle geglipt: eerst op aanbod.html en de 404's, daarna op de
   paneelkoppen van het dashboard die door JS worden gemaakt.
   font-synthesis-weight: none zegt: doe dat niet, teken gewoon het echte
   gewicht. Archivo is variabel (100-900), dus die verliest er niets bij.
   Alleen -weight, niet -style: `font-synthesis: none` zou ook de schuine
   variant van <em> uitzetten en die wordt in de lopende tekst wel gebruikt. */
* { font-synthesis-weight: none; }

.eyebrow { color: var(--muted); }
.eyebrow--light { color: #93A0AB; }

/* ---- knoppen: rechthoekig, hover keert om -------------------------------- */
.button {
  border: 2px solid var(--ink);
  font-family: var(--display-ui); text-transform: uppercase; letter-spacing: .05em;
  font-size: .8rem;
}
.button:hover { transform: none; }
/* Donkere merkinkt op oranje: 5,18:1. Het portaal had hier #111, dat haalt het
   ook, maar de merkinkt houdt het één systeem. */
.button--primary { background: var(--orange); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.button--primary:hover { background: #FF7A3D; box-shadow: 1px 1px 0 var(--ink); }
.button--secondary { background: transparent; color: var(--ink); }
.button--secondary:hover { background: var(--ink); color: var(--card); }
.button--light { background: var(--card); color: var(--ink); }
.icon-button { border: 2px solid var(--line); }

/* ---- zijbalk ------------------------------------------------------------- */
.nav__item { font-family: var(--display-ui); text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; }
.nav__item:hover, .nav__item.is-active { background: var(--orange); color: var(--ink); }
.account__avatar { color: var(--ink); font-weight: 800; }

/* ---- statuslabels: vierkant, met rand i.p.v. alleen een pastelvlak ------- */
.status, .integration-pill, .connection__status, .health-row__status, .activity-entry__badge {
  font-family: var(--display-ui); letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid currentColor;
}

/* ---- tabellen ------------------------------------------------------------ */
th { border-bottom: 2px solid var(--line); font-family: var(--display-ui); font-weight: 800; }
tbody tr:hover { background: var(--paper); }

/* ---- de hi-vis band, zoals op de site ------------------------------------ */
.savings-card { border: 3px solid var(--ink); }
.attention-card { border: 3px solid var(--ink); }
.attention-card strong { color: var(--orange); }

/* ---- focus: zelfde ring als de site -------------------------------------- */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 2px;
}