/* MSI UX V8.1 — top navigation refinement.
   Layout only. Uses the official MSI logo asset and keeps existing brand tokens/business logic. */

/* Header becomes one calm navigation surface, not a row of CTA rectangles. */
.top-navigation{background:rgba(255,255,255,.985)!important;border-bottom:1px solid #e4eaf1!important;box-shadow:0 3px 16px rgba(15,23,42,.035)!important}
.top-navigation-main{width:min(100%,1480px)!important;min-height:66px!important;padding:0 30px!important;gap:28px!important}

/* Official brand asset only. No reconstructed logo, icon box or replacement typography. */
.top-brand-button{min-height:58px!important;min-width:178px!important;padding:3px 4px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;transform:none!important}
.top-brand-button:hover{background:transparent!important;box-shadow:none!important;transform:none!important}
.top-brand-logo{display:block!important;width:174px!important;height:48px!important;max-width:100%!important;object-fit:contain!important;object-position:left center!important;filter:none!important;opacity:1!important}
.top-brand-icon,.top-brand-copy{display:none!important}

/* Desktop navigation = text navigation with active underline, not individual pills/buttons. */
.top-nav-links{display:flex!important;align-items:stretch!important;justify-content:flex-end!important;gap:0!important;min-width:0!important;flex:1!important;height:66px!important}
.top-nav-links button{position:relative!important;min-height:66px!important;height:66px!important;padding:0 13px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:#536274!important;box-shadow:none!important;transform:none!important;white-space:nowrap!important;font-size:14px!important;line-height:1!important;font-weight:650!important;letter-spacing:-.006em!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;text-shadow:none!important;opacity:1!important}
.top-nav-links button::after{content:''!important;position:absolute!important;left:13px!important;right:13px!important;bottom:0!important;height:2px!important;border-radius:999px 999px 0 0!important;background:transparent!important}
.top-nav-links button:hover{background:transparent!important;background-image:none!important;color:#173b70!important;box-shadow:none!important;transform:none!important}
.top-nav-links button:hover::after{background:#d6e2f1!important}
.top-nav-links button.active{background:transparent!important;background-image:none!important;color:#123f76!important;font-weight:750!important;box-shadow:none!important}
.top-nav-links button.active::after{background:#3e78bb!important}
.top-nav-links .nav-icon{font-size:13px!important;line-height:1!important;color:#7d8ca0!important;opacity:.82!important;margin:0!important}
.top-nav-links button.active .nav-icon{color:#3e78bb!important;opacity:1!important}
.top-nav-logout{margin-left:8px!important;padding-left:18px!important;border-left:1px solid #e5eaf0!important;border-radius:0!important;color:#64748b!important}
.top-nav-logout::after{display:none!important}

/* Secondary context strip behaves like a light sub-navigation, not a large pill row. */
.top-context-strip{width:min(100%,1480px)!important;min-height:38px!important;margin:0 auto!important;padding:0 30px 7px!important;display:flex!important;align-items:center!important;gap:14px!important;border-top:0!important}
.top-context-label{font-size:9.5px!important;letter-spacing:.105em!important;font-weight:800!important;color:#94a3b8!important}
.top-assistant-pills{display:flex!important;align-items:center!important;gap:14px!important;overflow-x:auto!important;padding:0!important}
.top-assistant-pill{position:relative!important;min-height:30px!important;height:30px!important;padding:0 2px!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:#66758a!important;box-shadow:none!important;transform:none!important;gap:5px!important}
.top-assistant-pill::after{content:''!important;position:absolute!important;left:2px!important;right:2px!important;bottom:0!important;height:1.5px!important;background:transparent!important}
.top-assistant-pill:hover{background:transparent!important;color:#173b70!important;box-shadow:none!important;transform:none!important}
.top-assistant-pill.active{border:0!important;background:transparent!important;color:#173b70!important;box-shadow:none!important}
.top-assistant-pill.active::after{background:#9bb8d9!important}
.top-assistant-pill strong{font-size:11.5px!important;line-height:1!important;font-weight:730!important;color:inherit!important}
.top-assistant-pill span{font-size:10.5px!important;line-height:1!important;font-weight:580!important;color:#7f8ea1!important}

/* Keep page canvas calm and aligned with the full-width navigation. */
.topnav-shell .page,.topnav-shell .chat-page{width:min(100%,1220px)!important}

@media(max-width:1180px) and (min-width:961px){
  .top-navigation-main{padding:0 18px!important;gap:14px!important}
  .top-brand-button{min-width:150px!important}
  .top-brand-logo{width:148px!important;height:44px!important}
  .top-nav-links button{padding:0 9px!important;font-size:12.5px!important;gap:4px!important}
  .top-nav-links button::after{left:9px!important;right:9px!important}
  .top-context-strip{padding-left:18px!important;padding-right:18px!important}
}

/* Tablet/mobile: compact header + proper menu sheet. No blue rectangular button wall. */
@media(max-width:960px){
  .top-navigation-main{min-height:60px!important;padding:0 14px!important;gap:12px!important;justify-content:space-between!important;flex-wrap:wrap!important}
  .top-brand-button{min-width:0!important;min-height:54px!important;padding:2px!important}
  .top-brand-logo{width:150px!important;height:44px!important}
  .top-nav-menu-toggle{display:flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;height:38px!important;padding:0 11px!important;border:1px solid #dbe3ec!important;border-radius:10px!important;background:#fff!important;background-image:none!important;color:#334155!important;box-shadow:none!important;font-size:13px!important;font-weight:700!important}
  .top-nav-menu-toggle:hover{background:#f8fafc!important;transform:none!important;box-shadow:none!important}
  .top-nav-links{display:none!important;order:3!important;flex:0 0 calc(100% + 28px)!important;height:auto!important;margin:0 -14px!important;padding:7px 14px 12px!important;border-top:1px solid #e8edf3!important;background:#fff!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 22px!important}
  .top-nav-links.is-open{display:grid!important}
  .top-nav-links button{width:100%!important;height:44px!important;min-height:44px!important;padding:0 2px!important;justify-content:flex-start!important;border-bottom:1px solid #edf1f5!important;font-size:13.5px!important;color:#475569!important}
  .top-nav-links button::after{left:2px!important;right:auto!important;width:28px!important;bottom:-1px!important}
  .top-nav-links button.active{color:#173b70!important}
  .top-nav-logout{grid-column:1/-1!important;margin:4px 0 0!important;padding-left:2px!important;border-left:0!important;border-bottom:0!important;color:#64748b!important}
  .top-context-strip{min-height:34px!important;padding:2px 14px 7px!important;gap:10px!important;border-top:0!important}
  .top-assistant-pills{gap:12px!important}
  .top-assistant-pill{height:28px!important;min-height:28px!important}
}

@media(max-width:560px){
  .top-navigation-main{padding:0 10px!important}
  .top-brand-logo{width:138px!important;height:40px!important}
  .top-nav-menu-toggle{height:36px!important;min-height:36px!important;padding:0 10px!important}
  .top-nav-links{flex-basis:calc(100% + 20px)!important;margin-left:-10px!important;margin-right:-10px!important;padding-left:12px!important;padding-right:12px!important;grid-template-columns:1fr!important;gap:0!important}
  .top-nav-links button{height:43px!important;min-height:43px!important;font-size:13.5px!important}
  .top-context-strip{padding-left:10px!important;padding-right:10px!important}
  .top-context-label{display:none!important}
  .top-assistant-pills{width:100%!important}
}

@media(prefers-reduced-motion:reduce){.top-navigation *{transition:none!important}}