/* SME169 navigation component. Loaded in the document head through the shared styles partial. */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(220,229,231,.8);backdrop-filter:blur(12px)}
.navbar{min-height:76px;display:flex;align-items:center;gap:28px}
.navbar-full{width:100%;max-width:none;margin-inline:0;padding-inline:28px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-md);color:var(--color-white);background:linear-gradient(145deg,var(--color-primary),#10a787);font-size:1.3rem;font-weight:900;box-shadow:0 8px 20px rgba(8,116,95,.22)}
.brand strong,.brand small{display:block;line-height:1.15}
.brand strong{letter-spacing:.04em}
.brand small{margin-top:4px;color:var(--color-text-muted);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.nav-menu{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0}
.nav-menu a{position:relative;padding:25px 12px 22px;color:#425d70;font-size:.92rem;font-weight:600}
.nav-menu a:after{content:"";position:absolute;right:14px;bottom:14px;left:14px;height:2px;border-radius:2px;background:var(--color-primary);transform:scaleX(0);transition:.2s}
.nav-menu a:hover,.nav-menu a.active{color:var(--color-primary)}
.nav-menu a.active:after{transform:scaleX(1)}
.nav-account{display:flex;align-items:center;gap:10px;flex:none}
.nav-account form{margin:0}
.user-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;font-weight:700}
.nav-toggle{display:none;padding:10px;border:0;background:transparent}
.nav-toggle>span:not(.sr-only){display:block;width:24px;height:2px;margin:5px;background:var(--color-text-brand)}

.nav-dropdown,.account-dropdown{position:relative}
.nav-dropdown summary,.account-dropdown summary{list-style:none;cursor:pointer}
.nav-dropdown summary::-webkit-details-marker,.account-dropdown summary::-webkit-details-marker{display:none}
.nav-dropdown>summary{display:flex;align-items:center;gap:6px;padding:20px 10px 18px;color:#425d70;font-size:.9rem;font-weight:750;white-space:nowrap}
.nav-dropdown>summary>span:last-child,.account-dropdown>summary>span:last-child{transition:transform .18s}
.nav-dropdown[open]>summary>span:last-child,.account-dropdown[open]>summary>span:last-child{transform:rotate(180deg)}
.nav-dropdown-panel{position:absolute;z-index:50;left:0;top:calc(100% - 5px);display:grid;min-width:245px}
.account-dropdown>summary{display:flex;align-items:center;gap:9px;max-width:245px;padding:5px 8px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.account-avatar{display:grid;flex:none;width:34px;height:34px;place-items:center;border-radius:10px;color:var(--color-white);background:var(--color-primary);font-weight:900}
.account-summary-text{display:block;min-width:0}
.account-summary-text strong,.account-summary-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-summary-text strong{font-size:.82rem}
.account-summary-text small{color:var(--color-text-muted);font-size:.7rem}
.account-dropdown-panel{position:absolute;z-index:55;right:0;top:calc(100% + 8px);width:300px;padding:10px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md)}
.account-dropdown-heading{display:grid;padding:8px 10px 12px;border-bottom:1px solid var(--color-border)}
.account-dropdown-heading small{color:var(--color-text-muted)}
.account-dropdown-panel>a,.account-logout button{display:block;width:100%;padding:10px;border:0;border-radius:9px;color:#425d70;background:transparent;text-align:left;font:inherit;font-weight:700;cursor:pointer}
.account-dropdown-panel>a:hover,.account-logout button:hover{color:var(--color-primary);background:var(--color-primary-soft)}
.account-dropdown-panel .role-sim-menu{margin:8px 0;padding:10px;border-block:1px solid var(--color-border)}
.account-dropdown-panel .role-sim-menu label{display:grid;height:auto;padding:0;border:0}
.account-dropdown-panel .role-sim-menu label>span{font-size:.78rem;font-weight:800}
.account-dropdown-panel .role-sim-menu select{width:100%;max-width:none;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.account-dropdown-panel .role-sim-menu button{margin-top:5px}
.account-logout{margin:0}

@media(max-width:980px){.nav-dropdown{width:100%}
.navbar{flex-wrap:wrap;min-height:70px}
.nav-toggle{display:block;margin-left:auto}
.nav-menu{display:none;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;padding:8px 0 16px}
.nav-menu.open{display:flex}
.nav-menu a{padding:10px 8px}
.nav-menu a:after{display:none}
.nav-account{margin-left:0}
.nav-dropdown>summary{justify-content:space-between;padding:10px 8px}
.account-dropdown-panel{right:0}
}
@media(max-width:700px){.navbar-full{padding-inline:14px}
.navbar{gap:12px}
.brand small,.user-name{display:none}
.nav-account{margin-left:auto}
.account-summary-text{display:none}
.account-dropdown>summary{padding:4px}
.account-dropdown-panel{position:fixed;top:70px;right:10px;left:10px;width:auto}
}
@media(max-width:420px){.nav-account .btn{padding:0 11px}}
@media(min-width:761px){.navbar{align-items:center;gap:14px;min-height:76px}
.nav-toggle{display:none!important}
.nav-menu{display:flex!important;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;order:initial;padding:0}
.nav-menu a{padding:20px 8px 18px;font-size:.86rem;white-space:nowrap}
.nav-menu a:after{display:block;right:10px;bottom:10px;left:10px}
.nav-account{margin-left:auto}
.brand{flex:0 0 auto}
.user-name{max-width:110px}
}
@media(min-width:981px){.site-header .navbar-full{width:100%;max-width:none;padding-inline:28px}
.site-header .nav-menu{justify-content:flex-start}
.site-header .nav-menu a{padding-inline:10px;font-size:.9rem}
.site-header .user-name{max-width:170px}
}

html body .site-header.site-header{border-bottom:0;background:var(--color-navigation);box-shadow:0 8px 24px rgba(7,25,37,.2);backdrop-filter:none}
html body .site-header.site-header .navbar{min-height:68px;gap:var(--space-6)}
html body .site-header.site-header .brand{color:var(--color-white)}
html body .site-header.site-header .brand-mark{color:var(--color-navigation);background:var(--color-white);box-shadow:none}
html body .site-header.site-header .brand small{color:#9fb8c5}
html body .site-header.site-header .nav-menu>.nav-dropdown{background:transparent}
html body .site-header.site-header .nav-menu>.nav-top-link,html body .site-header.site-header .nav-dropdown>summary{position:relative;display:flex;align-items:center;margin:0;border:0;border-radius:0;background:transparent;font-size:.91rem;font-weight:750;white-space:nowrap}
html body .site-header.site-header .nav-menu>.nav-top-link:after,html body .site-header.site-header .nav-dropdown>summary:after{display:none}
html body .site-header.site-header .nav-dropdown>summary>span{margin-left:5px;color:#52646e}
html body .site-header.site-header .nav-dropdown-panel{top:57px;grid-template-columns:1fr;gap:var(--space-1);width:330px;max-height:min(72vh,580px);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lg);overflow-y:auto}
html body .site-header.site-header .nav-group-system .nav-dropdown-panel{right:0;left:auto;width:350px}
html body .site-header.site-header .nav-dropdown-section{display:grid;gap:2px;min-width:0;padding:0}
html body .site-header.site-header .nav-dropdown-section+.nav-dropdown-section{margin-top:9px;padding-top:var(--space-3);border-top:1px solid var(--color-border)}
html body .site-header.site-header .nav-dropdown-section-title{margin:0 var(--space-2) var(--space-1);padding:0;border:0;color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-black);letter-spacing:.06em}
html body .site-header.site-header .nav-menu .nav-dropdown-section a{display:flex;align-items:center;justify-content:space-between;min-height:39px;padding:var(--space-2);border:0;border-radius:var(--radius-sm);color:#1e394a;background:var(--color-surface);font-size:.9rem;font-weight:var(--font-weight-medium)}
html body .site-header.site-header .nav-menu .nav-dropdown-section a:after{display:none}
html body .site-header.site-header .nav-menu .nav-dropdown-section a small{color:#91a2aa;font-size:1rem}
html body .site-header.site-header .nav-menu .nav-dropdown-section a:hover,html body .site-header.site-header .nav-menu .nav-dropdown-section a.active{color:var(--color-primary);background:var(--color-primary-soft)}
html body .site-header.site-header .nav-account{gap:8px}
html body .site-header.site-header .account-dropdown>summary{min-height:44px;padding:4px 8px 4px 5px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;background:rgba(255,255,255,.08)}
html body .site-header.site-header .account-dropdown>summary:hover,html body .site-header.site-header .account-dropdown[open]>summary{border-color:#18b893;background:rgba(24,184,147,.14)}
html body .site-header.site-header .account-avatar{width:34px;height:34px;border-radius:50%;color:var(--color-white);background:var(--color-primary)}
html body .site-header.site-header .account-summary-text strong{color:#fff}
html body .site-header.site-header .account-summary-text small{color:#a9c0cc}
html body .site-header.site-header .account-dropdown-panel{top:calc(100% + 12px);border:0;border-radius:14px;box-shadow:0 24px 55px rgba(4,20,30,.27)}
.role-sim-menu{margin:0}.role-sim-menu label{display:flex;align-items:center;gap:6px;height:40px;margin:0;padding:0 7px 0 9px;border:1px solid #dce5e7;border-radius:12px;background:#fff}.role-sim-icon{display:grid;width:18px;height:18px;place-items:center;border-radius:50%;color:#08745f;background:#e7f6f1;font-size:.7rem;font-weight:900}.nav-account .role-sim-menu select{width:auto;min-width:0;max-width:112px;min-height:0;margin:0;padding:0 20px 0 0;border:0;color:#13334a;background:transparent;box-shadow:none;font-size:.78rem;font-weight:800;line-height:1.2;outline:none}.nav-account .role-sim-menu button{min-height:28px;margin:0;padding:0 8px;border:0;border-radius:8px;color:#fff;background:#08745f;box-shadow:none;font-size:.72rem;font-weight:900;cursor:pointer}.role-simulation-bar{color:#fff;background:#13334a}.role-simulation-bar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px}.role-simulation-bar form{margin:0}.role-simulation-bar button{padding:6px 12px;border:1px solid rgba(255,255,255,.45);border-radius:10px;color:#fff;background:transparent;font-weight:800;cursor:pointer}
@media(min-width:981px){html body .site-header.site-header .nav-menu{align-self:center;gap:0;padding:0 7px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:var(--shadow-sm)}html body .site-header.site-header .nav-menu>:not(:first-child){border-left:1px solid var(--color-border-strong)}html body .site-header.site-header .nav-menu>.nav-top-link,html body .site-header.site-header .nav-dropdown>summary{min-height:46px;padding:0 15px;color:var(--color-text)}html body .site-header.site-header .nav-menu>.nav-top-link:hover,html body .site-header.site-header .nav-menu>.nav-top-link.active,html body .site-header.site-header .nav-dropdown>summary:hover,html body .site-header.site-header .nav-dropdown>summary.active,html body .site-header.site-header .nav-dropdown[open]>summary{color:#000;background:transparent}}
@media(max-width:980px){html body .site-header.site-header .navbar{min-height:64px;flex-wrap:wrap}html body .site-header.site-header .nav-toggle>span:not(.sr-only){background:#fff}html body .site-header.site-header .nav-menu{align-self:auto;padding:8px 0 14px;border-top:1px solid rgba(255,255,255,.12)}html body .site-header.site-header .nav-menu>.nav-top-link,html body .site-header.site-header .nav-dropdown>summary{min-height:44px;padding:8px 10px;color:#fff}html body .site-header.site-header .nav-menu>:not(:first-child){border-left:0}html body .site-header.site-header .nav-dropdown-panel,html body .site-header.site-header .nav-group-system .nav-dropdown-panel{position:static;right:auto;left:auto;width:auto;max-height:none;margin:0 8px 8px;padding:12px;border:0;border-radius:12px;background:#fff;box-shadow:none}html body .site-header.site-header .nav-dropdown>summary>span{margin-left:auto;color:#a9c0cc}}
@media(max-width:700px){html body .site-header.site-header .brand small{display:none}html body .site-header.site-header .account-dropdown-panel{top:68px}.nav-account .role-sim-menu select{max-width:92px}}