/* ─── Shared Nav Bar ────────────────────────────────────────────────────────
 * Persistent top bar for app pages: "← Projects" link + optional auth display.
 * Designed to work with or without base.css — defines its own fallback vars.
 * ────────────────────────────────────────────────────────────────────────── */

/* Fallback tokens — overridden if base.css is also loaded */
:root {
  --nav-surface: var(--surface, #141414);
  --nav-border: var(--border, #2a2a2a);
  --nav-text: var(--text, #e8e4df);
  --nav-text-dim: var(--text-dim, #6b6560);
  --nav-accent: var(--accent, #c44b2b);
  --nav-surface-2: var(--surface-2, #1c1c1c);
}

/* Reserve space for the fixed bar */
body {
  padding-top: 49px;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--nav-surface);
  border-bottom: 1px solid var(--nav-border);
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem;
}

.nav-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-bar-back {
  color: var(--nav-text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.nav-bar-back:hover {
  color: var(--nav-accent);
}

.nav-bar-sep {
  color: var(--nav-border);
  font-size: 0.85rem;
}

.nav-bar-app {
  color: var(--nav-text);
  font-size: 0.85rem;
  font-weight: 500;
}

.nav-bar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-bar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nav-surface-2);
  border: 1px solid var(--nav-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--nav-text-dim);
}

.nav-bar-email {
  color: var(--nav-text);
  font-size: 0.85rem;
}

.nav-bar-signout {
  color: var(--nav-text);
  text-decoration: none;
  border: 1px solid var(--nav-border);
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-bar-signout:hover {
  border-color: var(--nav-accent);
  color: var(--nav-accent);
  background: rgba(196, 75, 43, 0.1);
}

.nav-bar-signin {
  background: transparent;
  color: var(--nav-text);
  border: 1px solid var(--nav-border);
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-bar-signin:hover {
  border-color: var(--nav-accent);
  color: var(--nav-accent);
  background: rgba(196, 75, 43, 0.1);
}

.nav-bar-local {
  background: transparent;
  color: var(--nav-text-dim);
  border: 1px solid var(--nav-border);
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  text-transform: uppercase;
}

/* ─── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body {
    padding-top: 41px;
  }

  .nav-bar {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }

  .nav-bar-email {
    display: none;
  }
}