/* Solva-bel gedeelde UI: navigatiebalk + gebruikersdropdown
   BELANGRIJK: alles in px (geen rem) — pagina's hebben verschillende
   root-font-sizes en de balk moet overal pixel-identiek zijn.
   Bij wijzigingen: ?v=N bumpen in alle html + geo/seo-templates. */

html{scrollbar-gutter:stable}

/* ── Topbar (overal identiek, gerenderd door sbHeader in ui.js) ── */
.sb-top{position:sticky;top:0;z-index:1100;min-height:61px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid #e7eaf0;font-family:'Inter',system-ui,sans-serif}
.sb-top-inner{max-width:1140px;margin:0 auto;height:60px;padding:0 21px;display:flex;align-items:center;gap:22px}
.sb-brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.sb-brand img{width:30px;height:30px;display:block}
.sb-brand-name{font-size:15px;font-weight:800;letter-spacing:-.02em;color:#0f2b46}
.sb-brand-name b{color:#0a7a70;font-weight:800}
.sb-menu{display:flex;align-items:center;gap:2px}
.sb-link{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#4a5267;text-decoration:none;padding:7px 10px;border-radius:8px;background:none;border:none;cursor:pointer;font-family:inherit;line-height:1.4;transition:background .13s,color .13s;white-space:nowrap}
.sb-link:hover{background:#f3f5f9;color:#0f2b46}
.sb-link.active{color:#0a7a70}
.sb-chev{width:11px;height:11px;color:#9aa1b1;transition:transform .15s}
.sb-dd{position:relative}
.sb-dd.open .sb-chev{transform:rotate(180deg)}
.sb-dd.open>.sb-link{background:#f3f5f9;color:#0f2b46}
.sb-dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;width:280px;background:#fff;border:1px solid #e4e7ed;border-radius:12px;box-shadow:0 12px 40px rgba(15,23,41,.12);padding:5px;z-index:1200}
.sb-dd.open .sb-dd-menu{display:block}
.sb-dd-menu a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;transition:background .12s}
.sb-dd-menu a:hover{background:#f6f7fa}
.sb-dd-menu a b{display:block;font-size:12px;font-weight:600;color:#2b3347;line-height:1.4}
.sb-dd-menu a.active b{color:#0a7a70}
.sb-dd-menu a small{display:block;font-size:10.5px;color:#7c8496;margin-top:2px;line-height:1.4}
.sb-auth{margin-left:auto;display:flex;align-items:center;gap:7px;flex-shrink:0}
.sb-login{font-size:12px;font-weight:600;color:#4a5267;text-decoration:none;padding:7px 10px;border-radius:8px;line-height:1.4;white-space:nowrap}
.sb-login:hover{background:#f3f5f9;color:#0f2b46}
.sb-cta{font-size:12px;font-weight:700;color:#fff;background:#0a7a70;padding:8px 14px;border-radius:8px;text-decoration:none;line-height:1.4;transition:background .15s;white-space:nowrap}
.sb-cta:hover{background:#086b62}
.sb-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px}
.sb-burger:hover{background:#f3f5f9}
.sb-burger svg{width:20px;height:20px;color:#2b3347;display:block}
@media(max-width:880px){
  .sb-top-inner{gap:12px;padding:0 15px}
  .sb-menu{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;border-bottom:1px solid #e4e7ed;box-shadow:0 16px 40px rgba(15,23,41,.1);flex-direction:column;align-items:stretch;gap:0;padding:8px 11px 14px}
  .sb-top.open .sb-menu{display:flex}
  .sb-link{padding:9px;font-size:13px}
  .sb-dd-menu{position:static;width:auto;border:none;box-shadow:none;padding:0 0 5px 8px;display:block}
  .sb-dd>.sb-link{pointer-events:none;color:#9aa1b1;font-size:10px;text-transform:uppercase;letter-spacing:.07em;padding:11px 9px 3px}
  .sb-chev{display:none}
  .sb-login{display:none}
  .sb-burger{display:block}
}

/* ── Cookiemelding (bescheiden, linksonder) ── */
.sb-cookies{position:fixed;left:16px;bottom:16px;z-index:1300;max-width:330px;background:#fff;border:1px solid #e4e7ed;border-radius:13px;box-shadow:0 16px 48px rgba(15,23,41,.16);padding:14px 16px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;font-family:'Inter',system-ui,sans-serif}
.sb-cookies.show{opacity:1;transform:none}
.sb-cookies p{font-size:12px;line-height:1.55;color:#4a5267;margin:0}
.sb-cookies p b{color:#0f1729;font-size:12.5px}
.sb-cookies a{color:#0a7a70;font-weight:600;text-decoration:none}
.sb-cookies a:hover{text-decoration:underline}
.sb-cookies-ok{align-self:flex-start;background:#0a7a70;color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:700;padding:7px 16px;cursor:pointer;transition:background .15s}
.sb-cookies-ok:hover{background:#086b62}
@media(max-width:480px){.sb-cookies{left:10px;right:10px;bottom:10px;max-width:none}}

/* ── Gebruikersdropdown ── */
.user-dd{position:relative}
.user-dd-btn{display:flex;align-items:center;gap:7px;background:none;border:1px solid transparent;border-radius:8px;padding:4px 8px;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.user-dd-btn:hover{background:#f3f5f9;border-color:#e4e7ed}
.user-avatar{width:26px;height:26px;border-radius:50%;background:#0f2b46;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.02em}
.user-dd-name{font-size:12px;font-weight:600;color:#2b3347;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dd-chev{width:12px;height:12px;color:#7c8496;transition:transform .15s}
.user-dd.open .user-dd-chev{transform:rotate(180deg)}
.user-dd-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;width:250px;background:#fff;border:1px solid #e4e7ed;border-radius:12px;box-shadow:0 12px 40px rgba(15,23,41,.12);z-index:1200;overflow:hidden}
.user-dd.open .user-dd-menu{display:block}
.user-dd-head{padding:13px 15px 10px;border-bottom:1px solid #eef1f6}
.user-dd-email{font-size:12px;font-weight:600;color:#0f1729;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dd-tier{display:inline-block;margin-top:4px;font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:4px;background:#f3f5f9;color:#4a5267;border:1px solid #e4e7ed}
.user-dd-tier.pro{background:#f0fdfa;color:#0a7a70;border-color:#ccfbf1}
.user-dd-usage{font-size:10px;color:#7c8496;margin-top:5px}
.user-dd-usage b{color:#2b3347}
.user-dd-menu a,.user-dd-menu button.dd-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 15px;font-size:12px;font-weight:500;color:#2b3347;text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;line-height:1.4;transition:background .12s}
.user-dd-menu a:hover,.user-dd-menu button.dd-item:hover{background:#f6f7fa}
.user-dd-menu .dd-sep{height:1px;background:#eef1f6;margin:4px 0}
.user-dd-menu .dd-upgrade{color:#0a7a70;font-weight:700}
.user-dd-menu .dd-logout{color:#b91c1c}
.dd-ico{width:15px;height:15px;flex-shrink:0;color:#7c8496}
.dd-upgrade .dd-ico{color:#0a7a70}
.dd-logout .dd-ico{color:#b91c1c}