/* nav.css — unified navigation shell, Cloudscape recipe
   (prds/20260704-unified-nav re-skinned by prds/20260705-cloudscape-ui).
   Cloudscape AppLayout: dark TopNavigation bar on ALL viewports; white
   SideNavigation below it — persistent ≥1024px, off-canvas drawer under.
   nav.js stamps body.has-nav; tokens come from /cloudscape.css. */

body.has-nav { padding-top: 48px; }

#cnav-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 1200;
  background: var(--cs-topnav, #0f1b2a); color: #fff;
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  font-family: var(--cs-font, 'Open Sans', sans-serif);
}
#cnav-burger {
  background: none; border: 0; color: #fff; font-size: 20px;
  padding: 8px 10px; cursor: pointer; line-height: 1; border-radius: 8px;
}
#cnav-burger:hover { background: rgba(255,255,255,.12); }
.cnav-brand {
  font-weight: 700; font-size: 15px; color: #fff; text-decoration: none;
  white-space: nowrap; padding: 4px 6px;
}
.cnav-brand span { color: #539fe5; }
#cnav-title {
  font-size: 13px; color: #8d99a8; padding-left: 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border-left: 1px solid #414d5c;
  margin-left: 6px;
}
.cnav-topbar-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #d1d5db; min-width: 0;
}
.cnav-topbar-right .cnav-user {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px;
}
.cnav-logout {
  background: none; border: 0; color: #539fe5; font-weight: 700;
  font-size: 13px; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  font-family: inherit; flex: none;
}
.cnav-logout:hover { background: rgba(255,255,255,.12); color: #89bdee; }

#cnav-backdrop {
  position: fixed; inset: 0; background: rgba(0,7,22,.5); z-index: 1190;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.cnav-open #cnav-backdrop { opacity: 1; pointer-events: auto; }

#cnav {
  position: fixed; top: 48px; bottom: 0; left: 0; width: 280px; z-index: 1195;
  scrollbar-width: thin;
  background: #fff; color: var(--cs-text, #000716);
  border-right: 1px solid var(--cs-divider, #e9ebed);
  font-family: var(--cs-font, 'Open Sans', sans-serif);
  transform: translateX(-100%); transition: transform .2s ease;
  display: flex; flex-direction: column; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 8px 0 0;
}
body.cnav-open #cnav { transform: translateX(0); box-shadow: 0 1px 8px 2px rgba(0,7,22,.18); }

.cnav-head { display: none; }  /* brand lives in the top bar now */

.cnav-group { padding: 4px 0 10px; }
.cnav-group + .cnav-group { border-top: 1px solid var(--cs-divider, #e9ebed); padding-top: 12px; }
.cnav-group-label {
  font-size: 14px; font-weight: 700; color: var(--cs-text, #000716);
  padding: 6px 24px 4px;
}
.cnav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 24px; min-height: 36px; box-sizing: border-box;
  color: var(--cs-text-2, #414d5c); text-decoration: none; font-size: 14px;
  border-left: 3px solid transparent;
}
.cnav-item:hover { color: var(--cs-link-hover, #033160); background: var(--cs-bg-alt, #f2f8fd); }
.cnav-item.active {
  color: var(--cs-link, #0972d3); font-weight: 700;
  background: var(--cs-bg-alt, #f2f8fd);
  border-left-color: var(--cs-link, #0972d3);
}
.cnav-ic { width: 22px; text-align: center; flex: none; font-size: 15px; }

.cnav-foot { display: none; }  /* user + logout live in the top bar now */

@media (min-width: 1024px) {
  body.has-nav { padding-left: 280px; }
  #cnav { transform: none; }
  #cnav-burger, #cnav-backdrop { display: none; }
}
@media (max-width: 480px) {
  #cnav-title { display: none; }
}