/* ═══════════════════════════════════════════════════════════════════════════
   Nav v2 - grouped top nav for OrgFoundry. Replaces 7 flat tabs + "More ▾"
   overflow with 5 named chapters, each opening a dropdown panel of items.
   The active view's chapter shows an orange underline + bold; the active
   item within the open dropdown is highlighted.

   Chapters: Organize · Workforce · Intelligence · Talent · Foundry & Tools · Admin
   Scope: .nav-v2-* classes only. Legacy .tab styles untouched as fallback.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────────────────────── */
.tabs.nav-v2-chapters {
  display: flex;
  gap: 2px;
  align-items: stretch;
  /* Gap between brand and first chapter to give the nav visual rhythm */
  margin-left: 8px;
}

/* Override the legacy `#nav .tabs { overflow-x: auto }` rule which forces
   browsers to also set overflow-y: auto (browsers silently couple the two
   when one is non-visible). That created a 1-px tall vertical scrollbar
   with up/down arrow buttons painted at the right edge of the chapter row
   between ADMIN and the role pills. The v2 nav doesn't need internal
   scrolling - chapters wrap on small screens via `flex-wrap` instead.
   Selector includes `#nav` to beat the legacy rule's specificity. */
#nav .tabs.nav-v2-chapters {
  overflow: visible;
}

/* ── Lift #nav stacking so dropdowns paint above #toolbar ──────────────── */
/* The legacy stylesheet sets #nav and #toolbar both to z-index:100. Their
   stacking is then decided by document order, so #toolbar (later in DOM)
   paints above #nav and any of its descendants - including the chapter
   dropdowns even though they're `position: fixed; z-index: 1100`. Fixed
   positioning escapes the *containing block* but NOT the *stacking
   context*. Bumping #nav to 200 gives the v2 dropdowns a stacking context
   that beats #toolbar without competing with modals (z:1000+). */
#nav { z-index: 200; }

/* ── Chapter (trigger + dropdown) ──────────────────────────────────────── */
.nav-v2-chapter {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Chapter trigger button ────────────────────────────────────────────── */
.nav-v2-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 7px;
  border: 0;
  background: transparent;
  color: var(--nav-muted, rgba(255,255,255,0.6));
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  transition: all 0.12s ease;
}
.nav-v2-trigger:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
}
.nav-v2-trigger:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -2px;
}
.nav-v2-trigger-label {
  white-space: nowrap;
}
/* Leading section glyph (⬡ ◈ ✦ ◆ ⚙ ❖). Sized a touch larger than the small
   uppercase label and given a fixed optical box so thin/heavy glyphs align.
   Inherits `color` from the trigger, so it tracks the same muted → white
   transition on hover / open / active-chapter. letter-spacing reset so the
   label's 0.06em tracking doesn't push the glyph off-centre. aria-hidden in
   the markup keeps screen readers from speaking the Unicode glyph name. */
.nav-v2-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  flex-shrink: 0;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.nav-v2-caret {
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.16s ease;
  display: inline-block;
}
.nav-v2-chapter[aria-expanded="true"] .nav-v2-caret,
.nav-v2-trigger[aria-expanded="true"] .nav-v2-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Active state - chapter contains the current view ──────────────────── */
.nav-v2-chapter-active .nav-v2-trigger {
  color: #FFFFFF;
}
.nav-v2-chapter-active .nav-v2-trigger::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  background: var(--orange-bright, #FF5A00);
  border-radius: 2px 2px 0 0;
}

/* Open state - dropdown is showing */
.nav-v2-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

/* ── Dropdown menu ─────────────────────────────────────────────────────── */
/* position: fixed so the menu escapes #nav's stacking context (z-index 100)
   and reliably layers above #toolbar. nav_v2.js sets `top` and
   `left` dynamically from the trigger's getBoundingClientRect on open. */
.nav-v2-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 240px;
  background: linear-gradient(180deg, #0F1419 0%, #06080B 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 1100;
  animation: navV2DropdownIn 0.14s ease-out;
}
.nav-v2-menu.hidden { display: none; }

@keyframes navV2DropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subtle accent stripe at top of dropdown - matches OrgFoundry brand idiom */
.nav-v2-menu::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--orange-bright, #FF5A00);
  border-radius: 1px;
}

/* ── Dropdown item ─────────────────────────────────────────────────────── */
.nav-v2-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.1s ease;
  white-space: nowrap;
}
/* Icon column - wrapped at runtime by nav_v2.js so leading glyphs sit in
   a fixed-width box. Normalizes optical alignment between thin glyphs
   (⌘ ⬡ ⧉) and heavy ones (⬢ ◉ ❖), and marks the glyph aria-hidden so
   screen readers don't speak the Unicode name. */
.nav-v2-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  flex-shrink: 0;
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.nav-v2-item:hover .nav-v2-item-icon,
.nav-v2-item:focus-visible .nav-v2-item-icon,
.nav-v2-item.nav-v2-item-active .nav-v2-item-icon {
  color: inherit;
}

.nav-v2-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.nav-v2-item:focus-visible {
  outline: 2px solid var(--orange-bright, #FF5A00);
  outline-offset: -2px;
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}

/* Active item - current view */
.nav-v2-item.nav-v2-item-active {
  background: rgba(255, 90, 0, 0.16);
  color: var(--orange-bright, #FF5A00);
  font-weight: 700;
}
.nav-v2-item.nav-v2-item-active::after {
  content: '✓';
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-bright, #FF5A00);
}

/* ── Item separator (e.g., between common items and admin-only) ───────── */
.nav-v2-menu hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 4px 6px;
}

/* ── Mobile / narrow screens ──────────────────────────────────────────── */
/* Below 1100px, let chapters wrap to a second row if needed; menus still
   open below their trigger. Below 760px, switch to a hamburger pattern. */
@media (max-width: 1100px) {
  .tabs.nav-v2-chapters {
    flex-wrap: wrap;
    margin-left: 4px;
  }
  .nav-v2-trigger {
    padding: 5px 10px 6px;
    font-size: 10px;
  }
}
@media (max-width: 760px) {
  .nav-v2-menu { min-width: 220px; left: 0; right: auto; }
  /* When opened, allow menu to expand to viewport on tiny screens */
  .nav-v2-menu { max-width: calc(100vw - 32px); }
}

/* ── Backdrop for outside-click-to-close ───────────────────────────────── */
/* Invisible click trap layered BELOW #nav so clicks outside the nav close
   the open dropdown, but clicks on triggers or menu items pass through to
   #nav (z:200) and its descendants. Earlier this was z:999 with the intent
   of "above content, below modals", but #nav forms a stacking context at
   z:200 - the menu's internal z:1100 doesn't escape that context. With the
   backdrop at 999 it painted ABOVE the whole nav stack, intercepting every
   click on menu items and closing the menu before switchView could fire.
   z:150 puts the backdrop above #toolbar (z:100) but below #nav
   (z:200), so the menu items receive clicks and the backdrop still catches
   clicks anywhere else on the page. */
#nav-v2-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 150;
}
#nav-v2-backdrop.hidden { display: none; }

/* ── Role-based visibility ─────────────────────────────────────────────── */
/* Items the current role can't access are hidden. Chapters with zero
   visible items collapse entirely (no trigger button). Server-side
   ScopeEngine still enforces data access independently - these classes
   only manage menu hygiene. */
.nav-v2-item.nav-v2-item-role-hidden {
  display: none !important;
}
.nav-v2-chapter.nav-v2-chapter-role-hidden {
  display: none !important;
}
/* Hide stranded <hr> separators when role gating leaves them at the top
   or bottom of a menu, or doubled up. */
.nav-v2-menu hr:first-child,
.nav-v2-menu hr:last-child {
  display: none;
}
.nav-v2-menu hr + hr { display: none; }

/* ── Restore visibility of "Viewing as" role pills ─────────────────────── */
/* orgforge.css line 1564 has `#nav .roles { display: none }` to hide the
   legacy empty fallback div. That rule unintentionally also hides the v2
   role pills nested inside `#role-context-wrap` because the inner div
   carries `class="roles u-entmenu-roles"` for backward compat. This rule wins via
   higher specificity (2 IDs + 1 class > 1 ID + 1 class). The pills inside
   the identity-framed wrapper are now visible again. */
#nav #role-context-wrap .roles {
  display: flex;
  gap: 2px;
  background: transparent;
  border: 0;
  padding: 0;
}
#nav #role-context-wrap .role-btn {
  padding: 4px 10px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--nav-muted, rgba(255,255,255,0.7));
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
#nav #role-context-wrap .role-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
#nav #role-context-wrap .role-btn.active-role {
  background: var(--orange-bright, #FF5A00);
  color: #111827;
}