/* ============================================================================
   portal-nav.css — single source of truth for the Power Tab navigation bar.
   Lifted from index.html's inline nav CSS (the canonical) so the bar is styled
   in ONE place across every surface. Legacy class aliases keep the older
   .topbar / .brand markup visually identical until those pages are migrated.
   Pairs with account-menu.css (the dropdown) + portal-nav-render.js (markup).
   ============================================================================ */

.portal-nav,
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy, #1b2a4a);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-inner,
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px; box-sizing: border-box;
  display: flex; align-items: center; height: 56px; gap: 8px; position: relative;
}

.nav-logo,
.brand {
  font-family: 'Playfair Display', serif; color: var(--white, #fff);
  font-size: 18px; font-weight: 700; letter-spacing: 0.5px; margin-right: 8px;
  display: flex; align-items: center; gap: 10px;
}
.nav-logo .logo-i { color: var(--copper, #b87333); }
.brand-logo { height: 30px; }

.nav-links {
  display: flex; gap: 4px;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.nav-link {
  color: rgba(255,255,255,0.65); text-decoration: none;
  font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: 6px;
  transition: all 0.2s; display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.nav-link:hover { color: var(--white, #fff); background: rgba(255,255,255,0.06); }
.nav-link.active { color: var(--white, #fff); background: rgba(255,255,255,0.10); }
.nav-link svg { width: 15px; height: 15px; opacity: 0.7; }
.nav-admin-btn svg { transition: transform 0.3s; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-user { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); font-size: 13px; }
.nav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue, #3a6ea5); color: var(--white, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
/* Hamburger stays hidden by the shared sheet. Pages that want a mobile
   hamburger menu (index.html) show it via their own inline ≤768 rule; pages
   that use phone-drawer.js leave it hidden. This keeps the shared sheet from
   imposing index's mobile-menu / ≤899 phone-drawer-takeover behavior on the
   8 pages that don't load phone-drawer.js (they'd lose nav at tablet width). */
.nav-hamburger { display: none; }

/* Common responsive baseline — every page tolerated this before the refactor.
   Page-specific mobile behavior (hamburger menu, is-pad / phone-drawer
   takeover) stays in each page's own inline CSS. */
@media (max-width: 1024px) {
  .nav-inner, .topbar-inner { padding: 0 20px; }
  .nav-links { gap: 2px; }
  .nav-link { padding: 6px 10px; font-size: 12.5px; }
  .nav-link svg { display: none; }
}
@media (max-width: 768px) {
  .nav-inner, .topbar-inner { padding: 0 16px; }
  .nav-links { display: none; }
  /* Phone: the injected hamburger (phone-drawer) is the nav + account here, so
     hide the avatar menu — it was colliding with the hamburger top-right — and
     center the logo (the desktop 30px back-arrow reserve made it float off-center). */
  .nav-user { display: none; }
  .nav-logo { position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0 !important; }
}

/* Print — swap the white/copper logo for the navy/copper one, drop the app
   chrome (tabs + account) and the navy bar so a printed page reads as a clean
   branded document on white paper. */
.nav-logo-print { display: none; }
@media print {
  .portal-nav, .topbar { position: static; background: none !important; box-shadow: none; border-bottom: 1px solid #EAE8E1; }
  .nav-inner, .topbar-inner { height: auto; padding: 10px 0; }
  .nav-links, .nav-right, .nav-user, [data-admin-trigger] { display: none !important; }
  .nav-logo-screen { display: none; }
  .nav-logo-print { display: inline-block; }
}

/* Logo left-reserve for the back chevron — MIRRORED from tokens.css so pages that
   load portal-nav.css but NOT tokens.css (e.g. the Tailwind pricing pages) still
   place the logo in exactly the same spot as every other nav. Collapses to 0 the
   moment a real chevron precedes the logo, so the logo never double-shifts. */
.brand, .subnav-home, .ii-home-link, .topbar-logo, .nav-logo, .topbar-link { margin-left: 30px; }
.ikag-back-arrow + .brand, .ikag-back-arrow + .subnav-home, .ikag-back-arrow + .ii-home-link,
.ikag-back-arrow + .topbar-logo, .ikag-back-arrow + .nav-logo, .ikag-back-arrow + .topbar-link { margin-left: 0; }