/* Every numbered change is independently removable. Never targets login. */
#appShell .layout-lab{position:fixed;right:20px;bottom:18px;z-index:100;background:white;border:1px solid #dce7e8;border-radius:12px;box-shadow:0 6px 24px #1d3c4f18;padding:10px 14px;font-size:12px;color:#1d3c4f;max-height:75vh;overflow:auto}
#appShell .layout-lab label{display:flex;gap:8px;margin:10px 0}#appShell .layout-lab input{width:auto}#appShell .layout-lab summary{cursor:pointer}
#appShell .layout-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
#appShell:not(.layout-step-1) .layout-icon{display:none}
#appShell.layout-step-1{grid-template-columns:76px minmax(0,1fr)}
#appShell.layout-step-1 .sidebar{width:76px;padding:22px 12px;overflow:visible;z-index:30;background:#1d3c4f!important}
#appShell.layout-step-1 .sidebar-brand{padding:0 0 26px;display:block}#appShell.layout-step-1 .sidebar-brand>div{display:none}#appShell.layout-step-1 .brand-icon{width:40px;height:40px;object-fit:contain}
#appShell.layout-step-1 .nav-item,#appShell.layout-step-1 .preview-nav-accordion>summary{font-size:0!important;padding:13px!important;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:#e5f3f1!important}
#appShell.layout-step-1 .nav-item>span{display:none}#appShell.layout-step-1 .nav-icon{display:block!important;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
#appShell.layout-step-1 .nav-item.active,#appShell.layout-step-1 .has-current>summary{background:#bcebe2!important;color:#1d3c4f!important}
#appShell.layout-step-1 .preview-nav-accordion{position:relative}#appShell.layout-step-1 .preview-nav-accordion>summary::after{display:none}
#appShell.layout-step-1 .preview-nav-children{position:absolute;left:62px;top:0;width:230px;background:#1d3c4f;padding:8px;border-radius:12px;box-shadow:0 8px 24px #1d3c4f25}
#appShell.layout-step-1 .preview-nav-children .nav-item{font-size:13px!important;justify-content:flex-start;gap:12px}#appShell.layout-step-1 .preview-nav-children .nav-item>span{display:inline}
#appShell.layout-step-1 .sidebar-user-block{display:none}.layout-profile{position:relative}.layout-profile>summary{cursor:pointer;color:#bcebe2;font-size:25px}.layout-profile-content{position:absolute;bottom:0;left:52px;width:180px;background:#1d3c4f;padding:16px;border-radius:12px;z-index:40}
#appShell.layout-step-2 .topbar{background:white;border-bottom:1px solid #e5edef;padding:20px 0;gap:20px;align-items:center;flex-wrap:wrap}.layout-school{margin-left:auto;font-size:12px;color:#496170;max-width:240px}
#appShell.layout-step-3 .content-shell{max-width:none;min-width:0;padding:24px 40px 90px;background:#f6f9fa}#appShell.layout-step-3 .view-root{width:100%;max-width:1600px;margin:32px auto}#appShell.layout-step-3 .panel{border:1px solid #e7edef;box-shadow:0 2px 8px #1d3c4f04;border-radius:16px;padding:28px}
#appShell.layout-step-4 :is(.stat-card,.metric-card,.dashboard-card){background:white!important;border:1px solid #e7edef;border-radius:16px;box-shadow:none;padding:24px}#appShell.layout-step-4 :is(.stat-value,.metric-value){font-size:32px;color:#1d3c4f}
#appShell.layout-step-5 .content-shell{color:#1d3c4f;background:#f6f9fa}#appShell.layout-step-5 :is(.primary-button){background:#08a091;color:white}#appShell.layout-step-5 :is(.panel,.card){border-radius:16px}
#appShell.layout-step-6 .content-shell :is(p,input,textarea,select,button){font-family:inherit;line-height:1.6}#appShell.layout-step-6 #viewTitle{font-size:30px;letter-spacing:-.8px;line-height:1.25;font-weight:700}#appShell.layout-step-6 .content-shell h3{font-size:21px;line-height:1.4}#appShell.layout-step-6 :is(.meta,.eyebrow,.panel-subtitle){color:#617684;line-height:1.6}
.layout-help{position:fixed;right:22px;bottom:76px;z-index:60}.layout-help>summary{cursor:pointer;padding:12px 18px;background:#1d3c4f;color:white;border-radius:30px;box-shadow:0 4px 18px #1d3c4f22}.layout-help>div{position:absolute;right:0;bottom:58px;width:min(340px,calc(100vw - 40px));background:white;padding:24px;border:1px solid #e1eaec;border-radius:16px;box-shadow:0 12px 40px #1d3c4f20}#appShell .layout-help .bob-tip{display:flex!important;color:#1d3c4f;background:#edf8f5;margin-top:18px}
#appShell.layout-step-8 table{border-collapse:collapse;width:100%}#appShell.layout-step-8 :is(td,th){border-left:0;border-right:0;border-bottom:1px solid #e7edef;padding:16px 12px}#appShell.layout-step-8 tbody tr:hover{background:#f1f9f7}#appShell.layout-step-8 .dashboard-action-item{padding:20px 0;border-color:#e7edef}
#appShell.layout-step-9 .content-shell :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border:1px solid #d8e3e6;border-radius:10px;padding:11px 13px;max-width:100%;background:white}#appShell.layout-step-9 .content-shell :is(.primary-button,.secondary-button,.danger-button){border-radius:10px;min-height:42px;padding:10px 16px}#appShell.layout-step-9 .content-shell :is(input,select,textarea,button):focus-visible{outline:3px solid #08a09155;outline-offset:3px}
#appShell .layout-menu{display:none}
@media(max-width:900px){#appShell.layout-step-3 .content-shell{padding:18px 20px 100px}}
@media(max-width:640px){#appShell.layout-step-10{grid-template-columns:minmax(0,1fr)}#appShell.layout-step-10 .sidebar{display:none}#appShell.layout-step-10.layout-menu-open .sidebar{display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;box-shadow:8px 0 30px #1d3c4f25}#appShell.layout-step-10 .layout-menu{display:block;border:1px solid #d8e3e6;border-radius:8px;background:white;padding:8px;font-size:20px}#appShell.layout-step-10 .topbar{gap:10px;flex-wrap:wrap}#appShell.layout-step-10 .topbar-actions{flex-wrap:wrap}#appShell.layout-step-10 .content-shell{min-width:0;padding:16px 14px 110px}#appShell.layout-step-10 .panel{padding:18px;min-width:0;overflow-x:auto}#appShell.layout-step-10 .layout-school{max-width:100%;margin:0}#appShell.layout-step-10 #viewTitle{font-size:25px}#appShell.layout-step-10 .preview-nav-children{position:static;width:210px}#appShell.layout-step-10.layout-menu-open .sidebar{width:280px}#appShell.layout-step-10 .nav-item>span{display:inline}#appShell.layout-step-10 .nav-item{font-size:13px!important;justify-content:flex-start;gap:10px}}
@media print{#appShell :is(.layout-lab,.layout-help,.layout-profile,.layout-menu,.layout-school){display:none!important}}

#appShell .layout-lab{right:auto;left:96px;bottom:18px}
@media(max-width:640px){#appShell .layout-lab{left:12px;max-width:190px}}

@media screen{#appShell.layout-step-2 .topbar,#appShell.layout-step-10 .topbar{display:flex!important}}
/* Feedback round 2: aligned rail, padded context, one account control. */
#appShell.layout-step-1 .nav-list{padding:0!important;gap:6px!important;width:52px}
#appShell.layout-step-1 .nav-list>.nav-item,#appShell.layout-step-1 .preview-nav-accordion,#appShell.layout-step-1 .preview-nav-settings{margin:0!important;padding:0!important;width:52px!important}
#appShell.layout-step-1 .nav-list>.nav-item,#appShell.layout-step-1 .preview-nav-accordion>summary,#appShell.layout-step-1 .preview-nav-settings>.nav-item{box-sizing:border-box;width:52px!important;height:48px!important;margin:0!important;padding:13px!important;transform:none;text-indent:0}
#appShell .layout-profile>summary{display:flex;align-items:center;justify-content:center;list-style:none;width:48px;height:48px;border-radius:12px;background:#ffffff0c}
#appShell .layout-profile>summary::marker{content:''}#appShell .layout-profile>summary::-webkit-details-marker{display:none}
#appShell .layout-profile>summary svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
#appShell.layout-step-2 .topbar{border:1px solid #e5edef;border-radius:16px;padding:22px 26px;box-sizing:border-box}
#appShell .layout-logbook-slot[hidden]{display:none!important}
#appShell .layout-logbook-slot .nav-item{display:flex;gap:8px;align-items:center;background:white;color:#1d3c4f;border:1px solid #d8e3e6;border-radius:10px;padding:10px 16px;font-size:14px}
#appShell .layout-logbook-slot svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
@media(max-width:640px){#appShell.layout-step-2 .topbar{padding:16px}#appShell.layout-step-10.layout-menu-open .nav-list{width:100%!important}}
/* Rail geometry: identical boxes, independent of inherited button styles. */
#appShell.layout-step-1 .sidebar{box-sizing:border-box!important;align-items:center!important;padding-inline:12px!important}
#appShell.layout-step-1 .sidebar-brand{box-sizing:border-box;width:52px!important;margin-inline:0!important;padding-inline:0!important;display:flex!important;justify-content:center!important;align-items:center!important}
#appShell.layout-step-1 .sidebar-brand .brand-icon{display:block!important;width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;margin:0!important;object-fit:contain}
#appShell.layout-step-1 .sidebar .sidebar-footer{box-sizing:border-box!important;width:52px!important;padding:0!important;margin-inline:0!important;align-items:center!important}
#appShell.layout-step-1 .layout-profile{box-sizing:border-box;width:52px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
#appShell.layout-step-1 .layout-profile>summary{box-sizing:border-box!important;width:52px!important;height:48px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;display:flex!important;justify-content:center!important;align-items:center!important}
#appShell.layout-step-1 .sidebar :is(.nav-item,.preview-nav-accordion>summary){gap:0!important;letter-spacing:0!important;border:0!important;justify-content:center!important;align-items:center!important}
#appShell.layout-step-1 .sidebar :is(.nav-icon,.layout-icon),#appShell.layout-step-1 .layout-profile>summary svg{display:block!important;width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;flex:0 0 22px!important;margin:0!important;padding:0!important;position:static!important;transform:none!important;stroke-width:1.8}
#appShell.layout-step-1 .sidebar :is(.nav-item.module-locked,.preview-nav-accordion>summary.module-locked)::after{display:block!important;content:""!important;left:50%!important;right:auto!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important}
#appShell.layout-step-1 .sidebar .preview-nav-children .nav-item{justify-content:flex-start!important;gap:12px!important}
#appShell.layout-step-1 .layout-logbook-slot .nav-item{font-size:14px!important;width:auto!important;min-height:42px;gap:8px!important;justify-content:center;padding:10px 16px!important}
#appShell.layout-step-1 .layout-logbook-slot .nav-item>span{display:inline!important;font-size:14px!important}
/* Logboek: readable text-only button in the context bar. */
#appShell .layout-logbook-slot .nav-item svg{display:none!important}
#appShell .layout-logbook-slot .nav-item{background:#fff!important;color:#1d3c4f!important;border:1px solid #9cafb9!important;font-size:15px!important;font-weight:600!important;line-height:1.4!important;min-height:44px;padding:11px 20px!important;opacity:1;white-space:nowrap;text-indent:0!important;letter-spacing:normal!important}
#appShell .layout-logbook-slot .nav-item>span{display:inline!important;color:inherit!important;font-size:15px!important;font-weight:600!important;line-height:1.4!important;opacity:1}
#appShell .layout-logbook-slot .nav-item:not(:disabled):hover{background:#edf7f4!important;border-color:#087f74!important}
#appShell .layout-logbook-slot .nav-item:focus-visible{outline:3px solid #08a09180;outline-offset:3px}
#appShell .layout-logbook-slot .nav-item:disabled{opacity:.55}
/* Logo matches the active navigation tile (52 by 48 pixels). */
#appShell.layout-step-1 .sidebar-brand .brand-icon{width:52px!important;height:48px!important;min-width:52px!important;max-width:52px!important;object-fit:contain;margin:0!important}
/* Remove the inherited submenu connector, not just the SVG icon. */
#appShell .layout-logbook-slot .nav-item::before,#appShell .layout-logbook-slot .nav-item::after{content:none!important;display:none!important}
#appShell .layout-logbook-slot .nav-item{margin-left:0!important;text-indent:0!important}
/* Equal top and horizontal spacing around the rail logo. */
#appShell.layout-step-1 .sidebar{padding-top:12px!important}
#appShell.layout-step-1 .sidebar-brand{margin-top:0!important;padding-top:0!important}
/* Equal visible spacing around the square logo: 12px on every side. */
#appShell.layout-step-1 .sidebar{padding-top:12px!important;row-gap:0!important;gap:0!important}
#appShell.layout-step-1 .sidebar-brand{height:64px!important;min-height:64px!important;flex:0 0 64px!important;padding:0 0 12px!important;margin:0!important;align-items:flex-start!important}
#appShell.layout-step-1 .sidebar-brand .brand-icon{width:52px!important;height:52px!important;min-height:52px!important;max-height:52px!important;align-self:flex-start!important}
#appShell.layout-step-1 .nav-list{margin-top:0!important}
/* Extra breathing room below the logo; top and side margins remain 12px. */
#appShell.layout-step-1 .sidebar-brand{height:76px!important;min-height:76px!important;flex:0 0 76px!important;padding-bottom:24px!important}
/* Single-item expanding labels replace native browser tooltips. */
#appShell .layout-hover-label{display:none!important}
#appShell.layout-step-1 .sidebar :is(.nav-item,.preview-nav-accordion>summary,.layout-profile>summary){position:relative}
@media(min-width:641px){
#appShell.layout-step-1 .sidebar :is(.nav-list>.nav-item,.preview-nav-accordion>summary,.preview-nav-settings>.nav-item,.layout-profile>summary)>.layout-hover-label{display:flex!important;position:absolute;left:calc(100% - 4px);top:0;height:48px;box-sizing:border-box;align-items:center;padding:0 18px 0 14px;border-radius:0 12px 12px 0;background:#1d3c4f;color:#fff;font-size:14px!important;font-weight:500;line-height:1.4;white-space:nowrap;box-shadow:8px 5px 16px #1d3c4f18;opacity:0;visibility:hidden;transform:translateX(-8px);transition:opacity .14s ease,transform .14s ease,visibility .14s;pointer-events:none;z-index:55}
#appShell.layout-step-1 .sidebar :is(.nav-list>.nav-item,.preview-nav-accordion>summary,.preview-nav-settings>.nav-item,.layout-profile>summary):is(:hover,:focus-visible)>.layout-hover-label{opacity:1;visibility:visible;transform:translateX(0)}
#appShell.layout-step-1 .sidebar :is(.preview-nav-accordion[open],.layout-profile[open])>summary>.layout-hover-label{opacity:0;visibility:hidden}
#appShell.layout-step-1 .sidebar .nav-item.active>.layout-hover-label,#appShell.layout-step-1 .sidebar .has-current>summary>.layout-hover-label{background:#bcebe2;color:#1d3c4f}
}
@media(prefers-reduced-motion:reduce){#appShell .layout-hover-label{transition:none!important}}
/* The header action group ends with print/download controls on the right. */
#appShell .topbar>.topbar-title{order:0}
#appShell .topbar>.layout-menu{order:-1}
#appShell .topbar>.layout-school{order:1;margin-left:auto}
#appShell .topbar>.layout-logbook-slot{order:2}
#appShell .topbar>#topbarActions{order:3;margin-left:auto;display:flex;justify-content:flex-end;flex-wrap:wrap}
#appShell #topbarActions>:is([id^="download"],[id^="print"],[download]){order:10}
@media(max-width:640px){#appShell .topbar>#topbarActions{width:100%;justify-content:flex-end}}
/* Keep Logboek next to the page title rather than the export controls. */
#appShell .topbar>.layout-logbook-slot{order:1;margin-left:0;margin-right:0}
#appShell .topbar>.layout-school{order:2;margin-left:auto}
#appShell .topbar:has(>.layout-logbook-slot:not([hidden]))>.topbar-title{flex:0 1 auto;width:auto;margin-right:0}
#appShell .topbar:has(>.layout-logbook-slot:not([hidden])){column-gap:16px}