/*
 * Shared navigation for the signed-in app (dashboards, reports, intelligence,
 * integrations, settings). Markup is injected by /assets/js/app-nav.js.
 * Depends on tokens.css.
 *
 * Selectors are scoped under #appNav / #mobileMenu so they win over any
 * page-level .nav / .nav-link rules and always render the same bar.
 * The platform accent comes from --accent-rgb (set per page on :root); the
 * app-nav.js <script> may override it with data-accent="r,g,b".
 */
#appNav {
  --nav-accent: var(--accent-rgb, 41, 200, 255);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--nav-h);
  padding: 0 var(--space-7);
  background: rgba(2, 3, 10, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  color: var(--text);
}
#appNav *,
#mobileMenu * {
  box-sizing: border-box;
}

#appNav .nav-brand {
  display: flex;
  align-items: center;
  min-width: 140px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}
#appNav .nav-logo {
  height: 38px;
  width: auto;
  display: block;
}

#appNav .nav-center {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}
#appNav .nav-tab {
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-13);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
#appNav .nav-tab:hover {
  background: rgba(var(--nav-accent), 0.08);
  color: var(--text);
}
#appNav .nav-tab.active {
  background: rgba(var(--nav-accent), 0.15);
  border-color: rgba(var(--nav-accent), 0.3);
  color: var(--text);
}

#appNav .nav-right {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}
#appNav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-12);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
#appNav .nav-link:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
#appNav .nav-link.active {
  background: rgba(var(--nav-accent), 0.15);
  border-color: rgba(var(--nav-accent), 0.4);
}
#appNav .nav-menu-btn {
  display: none;
  padding: var(--space-2);
  border: none;
  background: none;
  color: var(--text);
  font-size: var(--fs-24);
  line-height: var(--lh-none);
  cursor: pointer;
}

/* ── Mobile drawer ── */
#mobileMenu {
  --nav-accent: var(--accent-rgb, 41, 200, 255);
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: calc(var(--z-nav) - 1);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: var(--space-4);
  background: rgba(2, 3, 10, 0.98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-sans);
}
#mobileMenu.active {
  display: block;
}
#mobileMenu .mobile-nav-tab,
#mobileMenu .mobile-link {
  display: block;
  width: 100%;
  margin-bottom: var(--space-1);
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-14);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
#mobileMenu .mobile-nav-tab.active,
#mobileMenu .mobile-link.active {
  background: rgba(var(--nav-accent), 0.15);
  border-color: rgba(var(--nav-accent), 0.3);
  color: var(--text);
}
#mobileMenu .mobile-links {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}

/*
 * Responsive behaviour
 * app-nav.js measures the bar and adds these classes (to #appNav and #mobileMenu)
 * one step at a time until the content fits:
 *   nav-compact          drop icons, tighten spacing
 *   nav-links-collapsed  Reports/Intelligence/... move into the drawer
 *   nav-tabs-collapsed   view tabs move into the drawer too
 * At <=768px every page collapses to logo + menu button (pure CSS).
 */
#appNav.nav-compact {
  padding: 0 var(--space-5);
}
#appNav.nav-compact .nav-ico {
  display: none;
}
#appNav.nav-compact .nav-link,
#appNav.nav-compact .nav-tab {
  padding: var(--space-2) var(--space-3);
}
#appNav.nav-links-collapsed .nav-right > .nav-link,
#appNav.nav-tabs-collapsed .nav-center {
  display: none;
}
#appNav.nav-links-collapsed .nav-menu-btn,
#appNav.nav-tabs-collapsed .nav-menu-btn {
  display: block;
}
/* Drawer only repeats the tabs when the bar has hidden them */
#mobileMenu .mobile-nav-tab {
  display: none;
}
#mobileMenu.nav-tabs-collapsed .mobile-nav-tab {
  display: block;
}
@media (max-width: 768px) {
  #appNav {
    padding: 0 var(--space-4);
  }
  #appNav .nav-brand {
    min-width: 0;
  }
  #appNav .nav-center,
  #appNav .nav-right > .nav-link {
    display: none;
  }
  #appNav .nav-menu-btn {
    display: block;
  }
  #mobileMenu .mobile-nav-tab {
    display: block;
  }
}

/* Set by app-nav.js while it measures the bar (see fit()). */
#appNav.nav-measuring,
#appNav.nav-measuring * {
  transition: none !important;
}

/* ── Platform switcher (Shopify / Square / IMS) ───────────────────────────────
 * Rendered by app-nav.js only when the account has two or more data sources.
 * Stays visible when the Reports/Settings links collapse; at <=768px it moves
 * into the drawer.
 */
#appNav .platform-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
#appNav .platform-opt,
#mobileMenu .platform-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
#appNav .platform-opt:hover,
#mobileMenu .platform-opt:hover {
  color: var(--text);
  background: var(--surface-hover);
}
#appNav .platform-opt.active,
#mobileMenu .platform-opt.active {
  background: rgba(var(--nav-accent), 0.18);
  border-color: rgba(var(--nav-accent), 0.4);
  color: var(--text);
}
#mobileMenu .mobile-platforms {
  display: none;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 0 var(--space-4) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}
#mobileMenu .mobile-platforms .platform-opt {
  padding: var(--space-2) var(--space-4);
  border-color: var(--border);
  font-size: var(--fs-13);
}
#mobileMenu .mobile-platforms .platform-label {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
}
@media (max-width: 768px) {
  #appNav .platform-switch {
    display: none;
  }
  #mobileMenu .mobile-platforms.has-options {
    display: flex;
  }
}

/* Trial countdown / Lite reminder (app-nav.js renderPlanChip) */
#appNav .nav-link.plan-chip {
  border-color: rgba(var(--primary-to-rgb), 0.5);
  background: rgba(var(--primary-to-rgb), 0.12);
}