/* ============================================================
   SITHIYAM OS — NAV V5 (nd-prototype v6.1 implementation)
   Design: Glass/warm — matches nd-prototype-nav.html exactly
   Loaded last — highest specificity wins
   ============================================================ */

/* ── Layout fix: restore original top padding (screens own 40px handles nav clearance) ── */
/* ── Full-width: remove max-width cap so content matches the full-width nav ── */
.app { padding-top: 18px; max-width: none; width: 100%; }

/* ── Desktop nav bar ──────────────────────────────────────── */

.nd-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center;
  background: var(--glass);
  border-bottom: 1px solid var(--glass-b);
  border-top: 2px solid var(--accent-seam);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  padding: 0 24px;
  height: 56px;
  gap: 0;
  user-select: none;
}

/* Wordmark */
.nav-wordmark {
  font-family: var(--fd); font-size: 18px; font-weight: 500;
  color: var(--t1); letter-spacing: -.02em;
  margin-right: 28px; white-space: nowrap; flex-shrink: 0;
  text-decoration: none; cursor: pointer;
}
.nav-wordmark em { font-style: normal; color: var(--accent); }

/* Centre nav items */
.nav-items {
  display: flex; align-items: center; gap: 2px;
  flex: 1;
}
.nav-item {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--rp);
  font-family: var(--fu); font-size: 11px; font-weight: 700;
  color: var(--t3); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap; position: relative;
  border: 1px solid transparent;
}
.nav-item:hover { background: var(--bg-3); color: var(--t2); }
.nav-item.active {
  background: var(--bg-4); color: var(--t1);
  border-color: var(--b2);
  box-shadow: var(--sh1);
}
.nav-item .nav-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.nav-item .nav-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0; opacity: 0; transform: scale(0);
  transition: all 220ms var(--ease);
}
.nav-item.active .nav-dot { opacity: 1; transform: scale(1); }

/* Divider */
.nav-divider {
  width: 1px; height: 20px; background: var(--b2); margin: 0 4px; flex-shrink: 0;
}

/* Right side */
.nav-right {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-shrink: 0;
}

/* Dirty chip */
#qtDirtyChip {
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(168,116,18,.08);
  border: 1px solid rgba(168,116,18,.22);
}

/* Cmd button */
.nav-cmd-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: none;
  border: 1px solid var(--b2);
  color: var(--t3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.nav-cmd-btn:hover {
  background: var(--bg-3);
  border-color: rgba(168,116,18,.22);
  color: var(--t1);
}

/* New Quote button */
.nav-new-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 0 18px; height: 36px; border-radius: var(--rp);
  background: var(--accent-metal);
  border: none; cursor: pointer;
  font-family: var(--fu); font-size: 11px; font-weight: 800;
  color: #fff; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--sh1), var(--sh-inner);
  position: relative; overflow: hidden;
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav-new-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 55%);
  pointer-events: none;
}
.nav-new-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav-new-btn:active { filter: brightness(.95); transform: translateY(0); }

/* Avatar */
.nav-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-4); border: 1px solid var(--b2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fu); font-size: 11px; font-weight: 800; color: var(--t2);
  cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0;
  position: relative;
}
.nav-avatar:hover { border-color: rgba(168,116,18,.22); color: var(--accent); }

/* User dropdown — uses .open class (from toggleUserMenu JS) */
.nav-user-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 160px;
  background: var(--bg-1, #FEFDFB);
  border: 1px solid var(--b2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20,14,8,.12);
  padding: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(4px) scale(0.97);
  transition: opacity .15s, visibility .15s, transform .15s;
  z-index: 1002;
}
.nav-user-menu.open {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.nav-user-email {
  font-family: var(--fu); font-size: 10px; color: var(--t3);
  padding: 8px 12px 6px; display: block;
  border-bottom: 1px solid var(--b1, rgba(20,14,8,.09));
  margin-bottom: 4px;
}
.nav-user-signout {
  width: 100%; display: block; text-align: left;
  padding: 8px 12px; border-radius: 8px;
  font-family: var(--fu); font-size: 11px; font-weight: 600;
  color: var(--t2); background: none; border: none;
  cursor: pointer; transition: background .15s;
}
.nav-user-signout:hover { background: var(--bg-3); }

/* ── Mobile bottom tab bar ────────────────────────────────── */

.mob-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: var(--glass);
  border-top: 1px solid var(--glass-b);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
  user-select: none;
  align-items: center;
}

.nd-mob-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: 2px 0;
}
.nd-mob-tab-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 8px 10px;
  border-radius: var(--rp);
  border: 1px solid transparent;
  transition:
    background 220ms var(--ease),
    border-color 220ms var(--ease),
    padding 220ms var(--ease),
    gap 220ms var(--ease);
}
.nd-mob-tab.active .nd-mob-tab-inner {
  background: var(--bg-4);
  border-color: var(--b2);
  padding: 8px 14px 8px 12px;
  gap: 6px;
}
.nd-mob-tab-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--t3);
  transition: color 220ms var(--ease);
}
.nd-mob-tab.active .nd-mob-tab-icon { color: var(--t1); }
.nd-mob-tab-label {
  font-family: var(--fu); font-size: 11px; font-weight: 700;
  color: var(--t1); letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0;
  transition:
    max-width 220ms var(--ease),
    opacity 220ms var(--ease);
}
.nd-mob-tab.active .nd-mob-tab-label { max-width: 72px; opacity: 1; }

/* Centre New Quote tab */
.nd-mob-tab-new {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: 2px 6px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nd-mob-tab-new-inner {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px;
  border-radius: var(--rp);
  background: var(--accent-metal);
  box-shadow: var(--sh1), var(--sh-inner);
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nd-mob-tab-new:active .nd-mob-tab-new-inner { filter: brightness(.9); transform: scale(.97); }
.nd-mob-tab-new-label {
  font-family: var(--fu); font-size: 11px; font-weight: 800;
  color: #0A0806; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}

/* ── Mobile top bar — not used in nd design ─────────────── */
.mob-top { display: none !important; }

/* ── Suppress all old nav elements ───────────────────────── */
.nav-pill,
.nav-bar,
.mob-nav,
.mob-more-drawer,
.mob-more-bg,
.mob-more-panel,
.nav-drawer { display: none !important; }

/* ── Hide nav when QB2 full-screen overlay is active ─────── */
body.qb2-active .nd-topnav,
body.qb2-active .mob-bar,
body.qb2-active .mob-top,
body.qb2-active .status-ribbon { display: none !important; }

/* ── Responsive breakpoints ──────────────────────────────── */

@media (max-width: 900px) {
  .nav-wordmark { font-size: 15px; margin-right: 16px; }
  .nav-item { padding: 8px 12px; }
  /* Icon-only: hide text labels at 900px */
  .nav-item > span:last-of-type { display: none; }
}

@media (max-width: 720px) {
  .nd-topnav { display: none; }
  .mob-bar { display: flex; }
  .app { padding-top: 0; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}