/* EVO TrustGuard — portal chrome (nav + bottom-nav + body)
 *
 * Owner:        /css/AGENTS.md
 * Cascade:      AFTER components.css + /css/shared.css + /shared-themes.css.
 *               BEFORE page-[name].css.
 * Loaded by:    every portal HTML file (NOT auth, NOT marketing, NOT legal).
 * Edit policy:  add a rule here only if it appears identically in 5+ portal
 *               pages today AND is not page-prefixed (no .svc-* / .ctr-*).
 *
 * What lives here (per C56 audit Section 5 — duplicated 5+ files):
 *   - Top nav (.dash-nav, .dash-nav-brand, .dash-nav-right) — 13–14 files
 *   - Logo image rule (.nav-brand img, .dash-nav-brand img) — 13 files
 *     (the !important chain is preserved per audit Section 9 risk #5 —
 *     removing it is a separate simplification sprint)
 *   - Bottom nav (.bottom-nav, .bottom-nav-item) — 12 files identical
 *
 * Audit divergence notes (preserved as page-overrides in page-[name].css):
 *   - admin.html: dash-nav had different padding + dash-nav-brand had extra
 *     `gap: 12px`. Page CSS keeps those overrides.
 *   - invoices.html: bottom-nav used `var(--surface)` instead of
 *     `var(--white)` — appears to be in-progress dark-mode-aware refactor.
 *     Centralizing here uses var(--surface) by default so dark mode is
 *     correct everywhere; light mode resolves to #ffffff via tokens.css.
 *   - create-lead.html: bottom-nav-item was 1 line different. Page CSS
 *     keeps the divergence if needed.
 */

/* ── Body padding for bottom nav ──────────────────────────────────────── *
 * Every portal page reserved 80px at the bottom of the body so the bottom
 * nav (56px + safe-area) doesn't overlap content. */
body.portal-shared {
  padding-bottom: var(--space-20);
}

/* ── Top nav (.dash-nav) ──────────────────────────────────────────────── */
.dash-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}

.dash-nav-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.dash-nav-brand img {
  display: block;
  height: 48px;
}

.dash-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ── Logo image lock (preserved !important chain — audit risk #5) ─────── *
 * 13 files declare this rule with 4 !important declarations. Audit Section
 * 9 explicitly recommends keeping the chain in the extracted version —
 * removing it changes specificity and may break per-page overrides that
 * resize the logo on certain pages. Future cleanup sprint can revisit. */

.nav-brand img,
.dash-nav-brand img {
  height: 48px !important;
  width: auto !important;
  min-height: 48px !important;
  max-height: none !important;
}

/* ── Bottom nav ───────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: var(--z-nav);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}

.bottom-nav-item.active {
  color: var(--red);
}

.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.bottom-nav-item:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}