/* AIR Asset Register - shared canonical header.
   Matches v1-travel-request-swa Nimbus header pattern. Loaded by all 5 SWA
   pages (index, hardware-register, license-register, upload, admin). The page's
   inline CSS still owns the rest of the layout; this file owns the header and
   the L/D theme tokens it relies on. */

/* ---------- Theme tokens for the header band ---------- */
/* The Nimbus header is dark in BOTH themes. These tokens only affect the
   header / nav / user-menu surfaces. The page's inline CSS keeps its own
   :root[data-theme="..."] block for body, KPI tiles, cards, etc. */
:root{
  --hdr-bg:#00101E;
  --hdr-border:rgba(255,255,255,.10);
  --hdr-text:rgba(255,255,255,.85);
  --hdr-text-muted:rgba(255,255,255,.70);
  --hdr-text-strong:#ffffff;
  --hdr-hover-bg:rgba(255,255,255,.08);
  --hdr-active-bg:rgba(255,255,255,.12);
  --hdr-menu-bg:#ffffff;
  --hdr-menu-text:#0f172a;
  --hdr-menu-muted:#64748b;
  --hdr-menu-hover:#f1f5f9;
  --hdr-menu-border:#e2e8f0;
  --hdr-menu-shadow:0 10px 25px rgba(15,23,42,.10), 0 4px 6px rgba(15,23,42,.05);
}
:root[data-theme="dark"]{
  --hdr-menu-bg:#151d2e;
  --hdr-menu-text:#e8edf5;
  --hdr-menu-muted:#8892a4;
  --hdr-menu-hover:#1a2540;
  --hdr-menu-border:#1e2a3a;
  --hdr-menu-shadow:0 10px 25px rgba(0,0,0,.55), 0 4px 6px rgba(0,0,0,.35);
}

/* ---------- Nimbus header band ---------- */
header.air-header{
  position:sticky; top:0; z-index:100;
  background:var(--hdr-bg);
  border-bottom:1px solid var(--hdr-border);
  flex-shrink:0;
}
.hdr-inner{
  max-width:none; margin:0;
  display:flex; align-items:center; height:64px;
  padding:0 24px;
  gap:8px;
}
header.air-header .logo-link{
  display:flex; align-items:center; text-decoration:none;
  margin-right:16px;
}
header.air-header img.air-logo{
  height:32px; width:auto;
  filter:brightness(0) invert(1);
}
header.air-header nav{
  display:flex; align-items:center; gap:4px; flex:1;
}
header.air-header nav a{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:6px;
  font-size:13px; font-weight:500;
  color:var(--hdr-text-muted);
  text-decoration:none;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
header.air-header nav a svg{flex-shrink:0;}
header.air-header nav a:hover{
  background:var(--hdr-hover-bg);
  color:var(--hdr-text-strong);
  text-decoration:none;
}
header.air-header nav a.active{
  background:var(--hdr-active-bg);
  color:var(--hdr-text-strong);
}

/* ---------- Right side ---------- */
.hdr-right{display:flex; align-items:center; gap:6px;}
.hdr-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:6px;
  color:var(--hdr-text-muted); cursor:pointer;
  background:transparent; border:none;
  transition:background .15s, color .15s;
}
.hdr-icon-btn:hover{background:var(--hdr-hover-bg); color:var(--hdr-text-strong);}
.hdr-icon-btn svg{width:16px; height:16px;}

/* Theme toggle - swap moon/sun based on :root[data-theme] */
:root[data-theme="light"] #theme-btn .ic-moon{display:block;}
:root[data-theme="light"] #theme-btn .ic-sun{display:none;}
:root[data-theme="dark"]  #theme-btn .ic-moon{display:none;}
:root[data-theme="dark"]  #theme-btn .ic-sun{display:block;}

/* ---------- User pill + dropdown ---------- */
.hdr-user{
  display:flex; align-items:center; gap:8px;
  padding:6px 12px 6px 10px; border-radius:6px;
  color:var(--hdr-text); font-size:13px; font-weight:500;
  background:transparent; border:none; cursor:pointer;
  font-family:inherit;
  transition:background .15s;
  max-width:220px;
}
.hdr-user:hover{background:var(--hdr-hover-bg); color:var(--hdr-text-strong);}
.hdr-user svg.user-ic{width:16px; height:16px; opacity:.7; flex-shrink:0;}
.hdr-user span[data-user-name]{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.user-menu{position:relative; display:inline-block;}
.user-menu.open .hdr-user{background:var(--hdr-active-bg); color:var(--hdr-text-strong);}
.user-menu-panel{
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:240px; padding:6px;
  background:var(--hdr-menu-bg);
  border:1px solid var(--hdr-menu-border);
  border-radius:8px;
  box-shadow:var(--hdr-menu-shadow);
  opacity:0; transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .12s, transform .12s;
  z-index:200;
}
.user-menu.open .user-menu-panel{opacity:1; transform:translateY(0); pointer-events:auto;}
.user-menu-panel .umi{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:6px;
  font-size:13px; color:var(--hdr-menu-text);
  text-decoration:none; cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.user-menu-panel .umi.muted{
  color:var(--hdr-menu-muted); cursor:default;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.user-menu-panel a.umi:hover{
  background:var(--hdr-menu-hover);
  color:var(--hdr-menu-text);
  text-decoration:none;
}
.user-menu-panel .um-sep{
  height:1px; background:var(--hdr-menu-border); margin:4px 6px;
}

/* ---------- Slash accent (far right) ---------- */
.slash-accent{margin-left:8px; flex-shrink:0;}
.slash-accent svg{height:32px; width:48px; display:block;}

/* ---------- Responsive collapse for narrow viewports ---------- */
@media (max-width: 900px){
  header.air-header nav a span.nav-lbl{display:none;}
  .hdr-user{max-width:140px;}
}