/* nav.css — the top bar. Metrics, logo and account menu follow the shared
   ftbl.studio subsite convention (phonebook / homepage): 30px logo, radius 8,
   no glow; profile click opens a sign-out-only dropdown; no gear. */

.nav {
  position: sticky; top: 0; z-index: 30;
  height: var(--nav-h); display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-2);
}
.nav-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-home-btn {
  background: none; border: none; padding: 0; cursor: pointer; display: flex;
  transition: opacity .15s, transform .15s;
}
.nav-home-btn:hover  { opacity: .82; transform: scale(1.06); }
.nav-home-btn:active { transform: scale(.95); opacity: .65; }
.nav-brand-icon {
  position: relative; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
.nav-brand-icon svg { width: 18px; height: 18px; }
.nav-brand-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }

.nav-tabs {
  display: flex; gap: 2px; margin-left: 14px; padding: 3px;
  background: var(--surface-3); border-radius: 10px;
}
.nav-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--label-2); border-radius: 8px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.nav-tab svg { width: 15px; height: 15px; }
.nav-tab:hover { color: var(--label); }
.nav-tab.is-active { background: var(--surface); color: var(--label); box-shadow: var(--shadow-sm); }

.nav-spacer { flex: 1; }
.nav-user { position: relative; }
.nav-user-trigger {
  display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px;
  background: none; border: none; cursor: pointer; border-radius: var(--r-full);
  transition: background .14s;
}
.nav-user-trigger:hover { background: var(--surface-2); }
.nav-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-light); color: var(--accent);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.nav-user-name { font-size: 13px; font-weight: 500; white-space: nowrap; }
.nav-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 50;
  animation: scaleIn .15s var(--ease) both; transform-origin: top right;
}
.dropdown-item {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  background: none; border: none; cursor: pointer; font-size: 14px;
  border-radius: var(--r-sm); transition: background .12s;
}
.dropdown-item.danger { color: var(--red); }
.dropdown-item.danger:hover { background: var(--red-light); }