/* =========================================================
   OpenPath DX — nav.css (FULL FILE REPLACEMENT)
   Goal: premium pill trigger + clean dropdown (like screenshot)
   Safe: styles only nav/topbar/menu components
   ========================================================= */

:root{
  --nav-bg: rgba(255,255,255,0.78);
  --nav-border: rgba(229,231,235,0.92);
  --nav-text: rgba(15,23,42,0.92);
  --nav-muted: rgba(31,41,55,0.60);
  --nav-shadow: 0 18px 50px rgba(15,23,42,0.10);
  --nav-soft: 0 10px 30px rgba(15,23,42,0.06);
  --nav-radius: 14px;
}

/* ---- Topbar layout helpers (doesn't fight your site.css) ---- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration: none;
  color: var(--nav-text);
}

/* The right-side actions block */
.actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Keep your filter/search usable in header */
.filters{
  flex: 1 1 auto;
  min-width: 240px;
  max-width: 860px;
  display:flex;
  align-items:center;
  gap: 10px;
}

/* ---- Menu wrapper ---- */
.menuWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   Pill trigger button (LIKE the screenshot)
   ========================================================= */
.menuBtn{
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;               /* pill */
  border: 1px solid var(--nav-border);
  background: var(--nav-bg);
  color: var(--nav-text);
  box-shadow: var(--nav-soft);
  cursor:pointer;
  user-select:none;

  display:inline-flex;
  align-items:center;
  gap: 10px;

  font-weight: 800;
  letter-spacing: -0.01em;

  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}

.menuBtn:hover{
  background: rgba(255,255,255,0.90);
  border-color: rgba(229,231,235,0.98);
}

.menuBtn:active{
  transform: translateY(1px);
}

.menuBtn:focus-visible{
  outline: 2px solid rgba(37,99,235,0.30);
  outline-offset: 3px;
}

/* open state */
.menuBtn[aria-expanded="true"]{
  background: rgba(255,255,255,0.92);
  border-color: rgba(37,99,235,0.18);
  box-shadow:
    0 18px 55px rgba(15,23,42,0.10),
    0 0 0 5px rgba(37,99,235,0.10);
}

/* Inside pill */
.menuBtn__label{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  min-width:0;
}

/* callsign text (mono-ish) */
.menuBtn__call{
  font-family: var(--font-mono, ui-monospace);
  font-weight: 900;
  font-size: 12px;
  letter-spacing:-0.01em;
  white-space: nowrap;
}

/* subtle sublabel (optional) */
.menuBtn__sub{
  font-size: 12px;
  font-weight: 750;
  color: var(--nav-muted);
  white-space: nowrap;
}

/* Small chevron (like screenshot) */
.menuBtn__chev{
  width: 18px;
  height: 18px;
  display:inline-grid;
  place-items:center;
  border-radius: 999px;
  color: rgba(31,41,55,0.68);
}

/* Small avatar dot (optional, still classy) */
.menuBtn__avatar{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;

  background:
    radial-gradient(14px 14px at 30% 25%, rgba(255,255,255,0.70), transparent 60%),
    linear-gradient(135deg, rgba(56,189,248,0.85), rgba(37,99,235,0.85), rgba(20,184,166,0.85));

  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 12px 22px rgba(15,23,42,0.10);
  overflow:hidden;
}

.menuBtn__initial{
  font-family: var(--font-mono, ui-monospace);
  font-weight: 900;
  font-size: 11px;
  color: rgba(255,255,255,0.95);
  line-height: 1;
}

/* =========================================================
   Dropdown panel (clean + soft)
   ========================================================= */
.menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 300px;
  max-width: calc(100vw - 16px);

  border-radius: 16px;
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  padding: 10px;
  z-index: 9999;

  transform-origin: top right;
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;

  max-height: min(70vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
}

.menu:not([hidden]){
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.menu[hidden]{ display:none !important; }

/* scrollbars */
.menu::-webkit-scrollbar{ width: 10px; }
.menu::-webkit-scrollbar-thumb{
  background: rgba(31,41,55,0.14);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0);
  background-clip: padding-box;
}
.menu::-webkit-scrollbar-track{ background: transparent; }

/* Account header inside dropdown */
.menu__account{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px 12px;
  border: 1px solid rgba(229,231,235,0.85);
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 12px 26px rgba(15,23,42,0.06);
  margin: 2px 0 10px;
}

.menu__avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(22px 22px at 30% 25%, rgba(255,255,255,0.70), transparent 60%),
    linear-gradient(135deg, rgba(56,189,248,0.85), rgba(37,99,235,0.85), rgba(20,184,166,0.85));
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 16px 34px rgba(15,23,42,0.10);
  overflow:hidden;
}

.menu__accountCall{
  font-family: var(--font-mono, ui-monospace);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 12px;
  color: rgba(17,24,39,0.92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 185px;
}

.menu__accountSub{
  margin-top: 2px;
  font-size: 11px;
  color: rgba(31,41,55,0.55);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 185px;
}

.menu__pill{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,0.90);
  background: rgba(255,255,255,0.66);
  color: rgba(31,41,55,0.72);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.menu__accountTop{
  display:flex;
  align-items:center;
  gap: 8px;
}

/* Items */
.menu__item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  height:40px;
  border-radius: 12px;
  padding: 0 10px;

  border: 1px solid transparent;
  background: transparent;
  color: rgba(17,24,39,0.92);
  text-decoration:none;
  font-weight: 750;
  cursor:pointer;

  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.menu__item:hover{
  background: rgba(238,242,246,0.88);
  border-color: rgba(229,231,235,0.92);
  transform: translateY(-0.5px);
}

.menu__item:focus-visible{
  outline: 2px solid rgba(37,99,235,0.28);
  outline-offset: 2px;
  background: rgba(238,242,246,0.88);
  border-color: rgba(37,99,235,0.18);
}

.menu__item svg{
  width:18px;
  height:18px;
  opacity: 0.9;
  flex: 0 0 auto;
}

.menu__sep{
  height:1px;
  background: rgba(229,231,235,0.75);
  margin: 8px 4px;
}

.menu__danger{ color: rgba(153,27,27,1); }
.menu__danger:hover{
  background: rgba(254,242,242,0.92);
  border-color: rgba(254,226,226,0.98);
}

/* Mobile */
@media (max-width: 520px){
  .menu{ width: min(320px, calc(100vw - 16px)); }
  .filters{ min-width: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .menu, .menuBtn, .menu__item{
    transition: none !important;
    animation: none !important;
  }
}