/* Persistent global navigation; isolated from the Bootstrap/legacy navbar. */
#header-container { background:#fff; border:0; border-image:none; box-shadow:0 1px 0 #dce8e780; position:relative; z-index:20; }
.app-header { --nav-ink:#28484e; --nav-teal:#347c79; padding:12px 20px; font:400 14px/1.4 ClearSans,sans-serif; }.app-header * { box-sizing:border-box; }.app-header [hidden] { display:none!important; }.app-headerInner { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; width:100%; margin:0; }.app-brand { grid-column:1; grid-row:1; justify-self:start; display:inline-flex; align-items:center; gap:10px; color:var(--nav-ink); text-decoration:none; flex-shrink:0; }.app-brand span { font-size:17px; font-weight:500; letter-spacing:1.4px; }.app-brand img { width:44px; height:46px; object-fit:contain; }
.app-navPanel { grid-column:2; grid-row:1; justify-self:center; margin:0; min-width:0; }.app-navTrack { position:relative; isolation:isolate; padding:4px; border:1px solid #e1eaea; border-radius:18px; background:#f2f6f5; }.app-navList { position:relative; display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; }.app-navList li { min-width:0; }.app-header .nav-link-header { position:relative; display:flex; align-items:center; justify-content:center; min-height:40px; padding:9px 16px; color:#61777b; font-size:13px; font-weight:500; text-decoration:none; white-space:nowrap; border-radius:13px; background:none; box-shadow:none; margin:0; transition:color 160ms ease; }.app-header .nav-link-header.active { color:#fff; background:none; box-shadow:none; }.app-navDrop { position:absolute; top:0; left:0; width:100px; height:40px; opacity:0; border-radius:13px; background:linear-gradient(120deg,#286e79,#468a80); box-shadow:0 3px 8px #215f6724,inset 0 1px 0 #ffffff26; pointer-events:none; transform-origin:0 0; will-change:transform; }
.app-headerActions { grid-column:3; grid-row:1; justify-self:end; display:flex; align-items:center; gap:8px; flex-shrink:0; }.app-header .app-account,.app-header #logout,.app-header .app-navToggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 12px; border:1px solid #dae6e3; border-radius:14px; background:#fff; color:#547176; margin:0; text-decoration:none; font:500 13px ClearSans,sans-serif; cursor:pointer; transition:background-color 140ms,color 140ms,transform 130ms; }.app-header .app-account[aria-current='page'] { background:#e9f3ef; border-color:#bdd8cc; color:#286d63; }.app-header #logout { width:44px; padding:10px; border-color:transparent; background:#f4f7f6; }.app-headerActions svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.app-header .app-navToggle { display:none; width:44px; padding:10px; }.app-header :is(a,button):focus-visible { outline:3px solid #568f95; outline-offset:3px; }.app-header .nav-link-header:focus-visible { outline-offset:-3px; }
@media(hover:hover) and (pointer:fine) { .app-header .nav-link-header:not(.active):hover { color:#286e6a; }.app-header .app-account:hover,.app-header .app-navToggle:hover { background:#edf5f2; }.app-header #logout:hover { background:#f7ece8; color:#976450; }.app-headerActions :is(a,button):active { transform:scale(.97); } }
@media(max-width:1199px) { .app-headerInner { gap:14px; }.app-brand span { display:none; }.app-header .nav-link-header { padding-inline:13px; } }
@media(max-width:999px) { .app-header { padding:12px 20px; }.app-headerInner { display:flex; flex-wrap:wrap; }.app-brand span { display:inline; }.app-headerActions { margin-left:auto; }.app-header .app-navToggle { display:inline-flex; }.app-navPanel { display:none; order:3; width:100%; margin:0; }.app-header.is-expanded .app-navPanel { display:block; }.app-navTrack { border-radius:19px; }.app-navList { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }.app-header .nav-link-header { min-height:44px; padding:10px 8px; }.app-navDrop { border-radius:14px; }.app-navToggle[aria-expanded='true'] { background:#e9f3ef; } }
@media(max-width:575px) { .app-header { padding:10px 16px; }.app-brand span { font-size:15px; letter-spacing:1px; }.app-brand img { width:38px; height:40px; }.app-header .app-account { width:44px; padding:10px; }.app-account span { display:none; }.app-headerActions { gap:4px; }.app-navList { grid-template-columns:repeat(2,minmax(0,1fr)); }.app-header .nav-link-header { justify-content:flex-start; padding-inline:18px; }.app-headerInner { gap:12px; } }
@media(prefers-reduced-motion:reduce) { .app-header :is(a,button) { transition:none; transform:none!important; } }
@media(forced-colors:active) { .app-header .nav-link-header.active { outline:2px solid Highlight; color:Highlight; }.app-navDrop { display:none; } }
/* Quiet company-wide status; the navigation remains the primary control. */
.app-mediaNav { position: relative; }
.app-mediaControl { position: relative; }
.app-header .app-mediaControl .nav-link-header { padding-right: 42px; }
.app-mediaToggle { position: absolute; inset: 0 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; padding: 0; border: 0; border-radius: 0 13px 13px 0; background: transparent; color: var(--nav-teal); cursor: pointer; transition: background-color 140ms ease; }
.app-mediaToggle::before { content: ''; position: absolute; left: 0; width: 1px; height: 14px; background: currentColor; opacity: .22; }
.app-mediaToggle svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.app-mediaNav.is-active .app-mediaToggle { color: #fff; }
.app-mediaNav.is-open .app-mediaToggle svg { transform: rotate(180deg); }
.app-mediaToggle:active { background: #347c791a; }
.app-mediaMenu { position: absolute; top: calc(100% + 12px); right: -68px; z-index: 40; width: 292px; margin: 0; padding: 8px; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 12px 40px -8px #15303a30, 0 2px 6px #15303a0d; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.97); transform-origin: 65% top; transition: opacity 120ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1), visibility 160ms; }
.app-mediaNav.is-open .app-mediaMenu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-duration: 180ms, 220ms, 0s; }
.app-mediaMenu a { display: flex; align-items: center; gap: 13px; min-height: 70px; padding: 12px; color: var(--nav-ink); text-decoration: none; border-radius: 10px; transition: background-color 140ms ease; }
.app-mediaMenu a > svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--nav-teal); stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app-mediaMenu strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; }
.app-mediaMenu small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: #61777b; }
.app-mediaMenu a[aria-current='page'] { background: #edf5f2; color: #286d63; }
.app-mediaMenu a[aria-current='page']::after { content: ''; width: 6px; height: 6px; margin-left: auto; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.app-mediaMenu a:focus-visible { outline-offset: -3px; background: #edf5f2; }
.app-mediaNav.is-immediate .app-mediaMenu, .app-mediaNav.is-immediate .app-mediaToggle svg { transition: none; }
@media (hover: hover) and (pointer: fine) {
    .app-mediaToggle:hover { background: #347c791a; }
    .app-mediaNav.is-active .app-mediaToggle:hover { background: #ffffff20; }
    .app-mediaMenu a:hover { background: #edf5f2; }
}
@media (max-width: 999px) {
    .app-mediaNav.is-open { grid-column: 1 / -1; }
    .app-header .app-mediaControl .nav-link-header { justify-content: flex-start; padding-right: 50px; }
    .app-mediaToggle { width: 44px; }
    .app-mediaMenu { display: none; position: static; width: 100%; margin-top: 8px; box-shadow: none; transform-origin: top center; }
    .app-mediaNav.is-open .app-mediaMenu { display: block; }
    .app-mediaMenu a { min-height: 64px; }
    @starting-style { .app-mediaNav.is-open:not(.is-immediate) .app-mediaMenu { opacity: 0; transform: translateY(-4px); } }
}
@media (prefers-reduced-motion: reduce) { .app-mediaMenu, .app-mediaNav.is-open .app-mediaMenu, .app-mediaToggle svg { transition: none; transform: none; } }
@media (forced-colors: active) { .app-mediaMenu { border: 1px solid CanvasText; }.app-mediaToggle { color: ButtonText; }.app-mediaNav.is-active .app-mediaToggle { color: Highlight; } }
.app-deviceStatus { position:relative; flex-shrink:0; }
.app-deviceLink { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px; border-radius:12px; color:var(--nav-ink); text-decoration:none; white-space:nowrap; transition:background-color 160ms ease,transform 150ms ease; }
.app-deviceCount { font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
.app-deviceLabel { font-size:11px; color:#61777b; }
.app-deviceDot { width:6px; height:6px; border-radius:50%; background:#a7b6b9; }
.app-deviceStatus[data-state='active'] .app-deviceDot { background:#528e86; }
.app-deviceStatus[data-state='error'] .app-deviceDot { background:#b08b60; }
.app-deviceTooltip { position:absolute; top:100%; right:0; z-index:30; width:240px; max-width:calc(100vw - 32px); padding:13px 15px; border:1px solid #dce8e5; border-radius:14px; background:#fff; box-shadow:0 10px 30px #203e4214; color:var(--nav-ink); opacity:0; visibility:hidden; transform:translateY(-4px) scale(.98); transform-origin:top right; transition:opacity 150ms ease,transform 180ms cubic-bezier(.23,1,.32,1),visibility 150ms; }
.app-deviceTooltip > * { display:block; }
.app-deviceCompany { font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.app-deviceDetail { margin-top:6px; font-size:12px; }
.app-deviceNote { margin-top:9px; color:#61777b; font-size:11px; }
.app-deviceStatus:not(.is-dismissed):focus-within .app-deviceTooltip { opacity:1; visibility:visible; transform:none; transition:none; }
.app-headerActions :is(a,button):active { transform:scale(.97); }
@media(hover:hover) and (pointer:fine) {
    .app-deviceLink:hover { color:var(--nav-ink); background:#f2f6f5; }
    .app-deviceStatus:not(.is-dismissed):hover .app-deviceTooltip { opacity:1; visibility:visible; transform:none; transition-delay:180ms; }
    .app-header .nav-link-header:not(.active):hover { background:#e7efed; }
}
@media(min-width:1000px) and (max-width:1399px) { .app-deviceLabel { display:none; } }
@media(min-width:1000px) and (max-width:1199px) { .app-header .app-account { width:44px; padding:10px; }.app-account span { display:none; } .app-header .nav-link-header { padding-inline:9px; }.app-headerInner { gap:10px; }.app-deviceLabel { display:none; } }
@media(max-width:575px) { .app-deviceLabel { display:none; }.app-deviceLink { padding:6px; }.app-deviceTooltip { right:-100px; } }
@media(prefers-reduced-motion:no-preference) {
    .app-header .nav-link-header { transition:color 160ms ease,background-color 160ms ease; }
    .app-header.is-expanded .app-navPanel { animation:app-navReveal 200ms cubic-bezier(.23,1,.32,1); }
    @keyframes app-navReveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
}
@media(prefers-reduced-motion:reduce) { .app-deviceTooltip { transition:none; transform:none; } }