/* SolidDesk huisstijl voor SolidPortal TEST. */
:root{--nav:#071e40;--nav-active:#10376e;--blue:#1674f5;--cyan:#18cce9;--ink:#15233b;--muted:#71809b;--line:#dfe7f1;--bg:#f3f6fb;--card:#fff}
body{background:radial-gradient(circle at 10% 10%,#e6f8ff,transparent 35%),var(--bg);font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,.button{background:linear-gradient(135deg,var(--blue),#179eea);border-radius:9px;padding:12px 18px;font-weight:800}
button:hover,.button:hover{background:linear-gradient(135deg,#1163d6,#1489ce)}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
input,select{padding:12px;border-color:#ccd8e8;border-radius:9px}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #1674f521}
label{font-size:12px;font-weight:750}
.testbar{background:#9c360b;position:relative;z-index:30}
.shell{background:var(--bg)}
.shell>aside{background:var(--nav);padding:0 0 16px}
.brand{height:112px;padding:24px 18px;gap:9px;letter-spacing:0;justify-content:center;text-decoration:none!important}
.brand-icon{width:52px;height:52px;object-fit:contain;flex-shrink:0}
.brand-copy{display:grid;color:inherit!important;min-width:0}
.brand-copy b{font-size:25px;line-height:1.1;font-weight:850;letter-spacing:-.8px}
.brand-copy small{margin-top:5px;font-size:9px;letter-spacing:.25px;font-weight:500}
nav{padding:0 14px}nav a{padding:11px 15px;border-radius:10px;font-weight:650;color:#b9c8de}
nav a:hover,nav a.selected{background:var(--nav-active);color:#fff}
.navlabel{font-size:10px;color:#9db0cc;margin:18px 29px 8px}
nav .navlabel{margin-left:15px}
.identity{border-top:1px solid #193459;padding:18px 24px;margin-top:auto}
.identity small{color:#9db0cc;font-size:11px}
.identity .quiet{color:#b9c8de;background:transparent;border-color:#294361}
.identity .quiet:hover{background:var(--nav-active);color:#fff}
main{padding:34px;max-width:1500px}
.pagehead{background:#fff;border-bottom:1px solid var(--line);margin:-34px -34px 28px;padding:20px 34px;min-height:90px}
h1{font-size:30px;margin:4px 0;letter-spacing:-.6px}h2{font-size:18px}
.eyebrow{color:var(--blue);font-size:10px;letter-spacing:1.5px;font-weight:900}
.appcard,.panel,.empty{border-radius:16px;padding:24px;box-shadow:0 8px 30px rgba(16,40,77,.04);background:var(--card)}
.appicon{background:#eaf2ff;color:var(--blue);border-radius:11px}
.workspace-tabs a{border-radius:10px}.workspace-tabs a.active{background:var(--blue);border-color:var(--blue)}
.quiet{background:transparent;color:var(--blue);border:1px solid var(--line);padding:10px 15px}
.quiet:hover{background:#eaf2ff;color:#15233b}
.danger{background:#a82121}.danger:hover{background:#871b1b}
.badge.neutral{border-radius:20px;background:#edf4ff;color:#245ba8}
th{font-size:10px;text-transform:uppercase;letter-spacing:.5px}th,td{padding:14px 18px}
footer{font-size:11px;color:#8793a7}
.login{width:min(640px,100%);max-width:640px;min-height:calc(100vh - 42px);margin:0 auto;padding:48px 30px;display:flex;flex-direction:column;justify-content:center}
.login .brand{height:auto;margin:0 auto 28px;padding:0;color:var(--nav)}
.login .brand-icon{width:68px;height:68px}.login .brand-copy b{font-size:32px}.login .brand-copy small{font-size:11px}
.login .panel{padding:34px;margin-bottom:0}.login h1{font-size:28px}.login form{margin-top:22px}.login button{margin-top:12px}
@media(min-width:851px){.shell>aside{position:sticky;top:0;height:100vh}}
@media(max-width:850px){.shell>aside{padding:0 0 12px}.brand{height:90px;padding:16px}.navlabel{margin:6px 29px}.identity{margin-top:12px;padding:12px 24px}main{padding:24px 16px}.pagehead{margin:-24px -16px 24px;padding:20px 16px;gap:12px}h1{font-size:26px}.login{padding:30px 16px}.login .panel{padding:24px}.appcard,.panel,.empty{padding:20px}}
@media(max-width:420px){.pagehead{flex-direction:column}.login .brand-copy b{font-size:28px}.login .brand-icon{width:56px;height:56px}}

/* Gebruikersblok en actieve navigatie volgen SolidDesk. */
.main-nav{display:grid;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;align-content:start;grid-auto-rows:max-content;gap:2px;padding:5px 14px}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{display:flex;align-items:center;gap:12px;position:relative;margin:0;padding:8px 15px}
.main-nav a i{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;font-style:normal;font-size:17px;color:#d7e7ff}
.main-nav a.selected:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:4px;background:var(--cyan)}
.main-nav a:hover,.main-nav a.selected{background:var(--nav-active);color:#fff;text-decoration:none}
.account{margin-top:auto;padding:16px;display:flex;align-items:center;gap:9px;border-top:1px solid #193459;flex:0 0 auto}
.account>.avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-weight:800;color:#fff}
.account>a{min-width:0;flex:1;color:#fff;text-decoration:none}
.account strong,.account small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account small{font-size:10px;color:#9db0cc}
.account form{margin:0;flex:0 0 auto}
.account button{border:0;background:transparent;color:#a9bad1;cursor:pointer;font-size:10px;font-weight:400;padding:2px;line-height:1.5;border-radius:0}
.account button:hover{background:transparent;color:#fff;text-decoration:underline}
@media(max-width:850px){.main-nav{display:flex;flex-wrap:wrap;overflow:visible}.main-nav .navlabel{width:100%}.account{margin-top:12px}}

/* De TEST-balk telt mee in de schermhoogte; lange inhoud blijft scrollbaar. */
.testbar{height:42px;min-height:42px}
.shell{min-height:calc(100dvh - 42px)}
@media(min-width:851px){.shell>aside{height:calc(100dvh - 42px);top:42px}}
.account .logout-icon{display:grid;place-items:center;width:32px;height:32px;padding:5px;border-radius:8px;color:#a9bad1;background:transparent}
.account .logout-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account .logout-icon:hover{background:var(--nav-active);color:#fff;text-decoration:none}

/* Centrale SolidWorkspace-logo’s, transparante varianten uit de logofamilie. */
.brand-lockup{display:grid;gap:0;min-width:0;width:100%}.brand-wordmark{display:block;width:100%;height:auto;object-fit:contain}.brand-lockup small{font-size:10px;line-height:1.4;text-align:center;color:inherit}.shell>aside .brand-lockup{max-width:216px}.login .brand-lockup{width:min(350px,100%)}

.product-icon{display:block;width:56px;height:56px;object-fit:contain;flex-shrink:0}.product-wordmark{display:block;width:min(100%,270px);height:82px;object-fit:contain;object-position:left center}