/* OneView Navbar — shared top bar for OneView platform apps.
   Same look as Device Management / OneView: 90px yellow bar, AEON delight
   banner + two-line app name on the left, burger menu on the right.
   Self-contained: only styles header.top and its menu, so it can be dropped
   onto any page without touching the page's own layout. */

/* Embedded inside OneView's iframe (OneView already shows its own navbar +
   "Back to OneView" bar) — hide ours. The in-iframe class is set by an inline
   <script> in <head> before first paint, so the bar never flashes. */
html.in-iframe header.top { display: none; }

header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 90px;
  padding: 0 32px;
  background: #FFCC00;
  border-bottom: 1px solid #e6b800;
  flex-shrink: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "PingFang TC", Roboto, sans-serif;
}
header.top *, header.top *::before, header.top *::after { box-sizing: border-box; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}
.brand img { height: 54px; width: auto; display: block; }
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand .brand-text .l1 { font-size: 17px; font-weight: 800; color: #90207a; }
.brand .brand-text .l2 { font-size: 13px; font-weight: 700; color: #90207a; }
.brand:focus-visible { outline: 3px solid #90207a; outline-offset: 3px; border-radius: 6px; }

/* Burger menu */
.menu-wrap { position: relative; }
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 1px solid #e6b800;
  background: #FFCC00;
  border-radius: 12px;
  cursor: pointer;
}
.burger:hover { background: #f0c000; }
.burger svg { display: block; width: 20px; height: 20px; }
.menu {
  position: fixed;
  min-width: 220px;
  margin: 0;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  padding: 6px;
  z-index: 1000;
}
.menu[hidden] { display: none !important; }
.menu button, .menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #292524;
  text-decoration: none;
  cursor: pointer;
}
.menu button:hover, .menu a:hover { background: #f5f5f4; color: #90207a; }
.menu [hidden] { display: none !important; }
.menu svg { color: #78716c; flex-shrink: 0; }
.menu .who { padding: 10px 12px 8px; border-bottom: 1px solid #f5f5f4; margin-bottom: 6px; }
.menu .who .r { font-size: 13px; font-weight: 700; color: #1c1917; }
.menu .who .s { font-size: 11px; color: #78716c; }

@media (max-width: 600px) {
  header.top { padding: 0 16px; gap: 12px; }
  .brand { gap: 10px; }
  .brand img { height: 42px; }
  .brand .brand-text .l1 { font-size: 15px; }
  .brand .brand-text .l2 { font-size: 11.5px; }
  .burger { width: 46px; height: 46px; }
}