/* =============================================================
   CLUTCHGATE Top Navigation (HUD theme)
   - No :root/body resets (theme comes from app.css)
   - Sticky "glass" bar that sits inside .container
   ============================================================= */

.topnav{
  position: sticky;
  top: 12px;
  z-index: 1200;
  margin: 12px 0 12px;
}

.topnav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;

  border: 1px solid var(--border);
  background: rgba(7,11,7,.60);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
}

/* Brand */
.topnav-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 210px;
  text-decoration:none;
  color: var(--text);
}
.topnav-logo{
  width: 10px;
  height: 10px;
  background: var(--accent);
}
.topnav-title{
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(236,244,246,.90);
}

/* Links */
.topnav-links{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.topnav-link{
  display:inline-flex;
  align-items:center;
  height: 40px;
  padding: 0 12px;

  border: 1px solid transparent;
  background: rgba(0,0,0,.14);

  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.topnav-link:hover{
  background: rgba(236,244,246,.06);
  color: rgba(236,244,246,.92);
  transform: translateY(-1px);
}
.topnav-link.active{
  color: rgba(7,11,7,.95);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(236,244,246,.10);
  box-shadow: 0 22px 70px rgba(var(--neon-rgb), .14);
}

/* Right side */
.topnav-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.topnav-coins{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(236,244,246,.14);
  background: rgba(0,0,0,.18);
  font-weight: 950;
  font-size: 12px;
  color: rgba(236,244,246,.86);
  white-space: nowrap;
}
.topnav-coins .coin{
  width: 10px;
  height: 10px;
  background: var(--accent);
}

.topnav-notif{
  position: relative;
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(236,244,246,.14);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.topnav-notif:hover{ background: rgba(236,244,246,.06); transform: translateY(-1px); }

.notif-badge{
  position:absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(236,244,246,.16);
  background: rgba(var(--red-rgb), .20);
  color: rgba(236,244,246,.92);
  font-weight: 950;
  font-size: 11px;
}

/* Search */
.topnav-search{
  position: relative;
  display:flex;
  align-items:center;
  gap: 8px;
}
.topnav-search input{
  width: min(420px, 42vw);
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(236,244,246,.14);
  background: rgba(0,0,0,.18);
  color: rgba(236,244,246,.90);
  outline: none;
}
.topnav-search input::placeholder{ color: rgba(236,244,246,.45); }
.topnav-search input:focus{
  border-color: rgba(var(--neon-rgb), .35);
  box-shadow: 0 0 0 3px rgba(var(--neon-rgb), .12);
}

.search-results{
  position:absolute;
  left:0;
  top: calc(100% + 10px);
  width: min(520px, 86vw);
  border: 1px solid rgba(236,244,246,.12);
  background: rgba(7,9,13,.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  padding: 10px;
  display:none;
  z-index: 1300;
}
.search-results.open{display:block}
.search-results .sr-title{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(236,244,246,.62);
  margin: 2px 2px 10px;
}
.search-results .sr-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(236,244,246,.08);
  background: rgba(0,0,0,.16);
}
.search-results .sr-item:hover{ background: rgba(236,244,246,.06); }
.search-results .sr-left{min-width:0}
.search-results .sr-name{font-weight: 900; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.search-results .sr-sub{color: rgba(236,244,246,.52); font-weight: 650; font-size: 12px; margin-top:4px}

/* Notifications dropdown (rendered by JS) */
.notif-dropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: min(420px, 92vw);
  border: 1px solid rgba(236,244,246,.12);
  background: rgba(7,9,13,.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  padding: 10px;
  display:none;
  z-index: 1300;
}
.notif-dropdown.open{display:block}

/* Mobile */
.topnav-toggle{
  display:none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(236,244,246,.14);
  background: rgba(0,0,0,.18);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.topnav-toggle:hover{ background: rgba(236,244,246,.06); transform: translateY(-1px); }

@media (max-width: 980px){
  .topnav-brand{min-width: auto}
  .topnav-links{display:none}
  .topnav-search input{width: 52vw}
  .topnav-toggle{display:inline-flex}
}

/* Drawer for mobile menu (toggled by JS: .topnav-links.open) */
@media (max-width: 980px){
  .topnav-links.open{
    display:flex;
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(236,244,246,.14);
    background: rgba(7,9,13,.90);
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 100px rgba(0,0,0,.80);
    z-index: 1500;
  }
  .topnav-link{height: 44px; justify-content:center}
}