/* ── VOOM 3-Tier Unified Navigation ──────────────────── */

.voom-nav {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  z-index: 100;
}

/* ── Tier 1: Global ─────────────────────────────────── */
.voom-nav__global {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* ── Tier 2: Module — teal bg, white text ──────────── */
.voom-nav__module {
  background: #0d9488;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ── Tier 3: Sub — white bg, teal text ─────────────── */
.voom-nav__sub {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* ── Inner container ────────────────────────────────── */
.voom-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}

/* ── Brand ──────────────────────────────────────────── */
.voom-nav__brand {
  padding-right: 1.2rem;
  margin-right: .25rem;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.voom-nav__brand-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: .45rem 0;
}
.voom-nav__brand-link:hover { text-decoration: none; }
.voom-nav__brand-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .32em;
  line-height: 1;
  color: #fff;
}
.voom-nav__brand-tag {
  font-size: .48rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-top: .1rem;
}

/* ── Links container ────────────────────────────────── */
.voom-nav__links {
  display: flex;
  gap: 0;
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.voom-nav__links::-webkit-scrollbar { display: none; }

/* ── Actions (right side) ───────────────────────────── */
.voom-nav__actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Tier 1 links ───────────────────────────────────── */
.voom-nav__global .voom-nav__link {
  padding: .7rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.voom-nav__global .voom-nav__link:hover {
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .05);
  text-decoration: none;
}
.voom-nav__global .voom-nav__link--active {
  color: #fff;
  border-bottom-color: #0d9488;
}

/* ── Tier 2 links — white on teal ────────────────────── */
.voom-nav__module .voom-nav__link {
  padding: .55rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.voom-nav__module .voom-nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  text-decoration: none;
}
.voom-nav__module .voom-nav__link--active {
  color: #fff;
  border-bottom-color: #fff;
}

/* ── Tier 3 links — teal on white ────────────────────── */
.voom-nav__sub .voom-nav__link {
  padding: .38rem .7rem;
  font-size: .76rem;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.voom-nav__sub .voom-nav__link:hover {
  color: #0d9488;
  text-decoration: none;
}
.voom-nav__sub .voom-nav__link--active {
  color: #0d9488;
  border-bottom-color: #0d9488;
  font-weight: 700;
}

/* ── Subtle links (logout — sits in tier-1 global bar) ── */
.voom-nav__link--subtle {
  color: rgba(255, 255, 255, .35);
  font-size: .72rem;
  padding: .25rem .5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: color .15s, background .15s;
  border-bottom: none;
}
.voom-nav__link--subtle:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  text-decoration: none;
}

/* ── Inbox button ── */
.voom-nav__inbox-btn {
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  background: #0d9488;
  color: #fff;
  text-decoration: none;
  transition: background .15s;
}
.voom-nav__inbox-btn:hover {
  background: #0f766e;
  text-decoration: none;
}

/* ── User name ── */
.voom-nav__user {
  font-size: .75rem;
  color: rgba(255, 255, 255, .5);
  font-weight: 500;
  text-decoration: none;
}
.voom-nav__user:hover {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}