/* ─── Top Navbar ─────────────────────────────────────── */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-h, 56px);
  background: #fff;
  border-bottom: 1px solid var(--border, #e0e0e0);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 4px;
  z-index: 1000;
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.08));
}

/* ─── Brand ──────────────────────────────────────────── */
.topnav .brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand, #1a73e8);
  margin-right: auto;
  letter-spacing: -0.01em;
}

/* ─── All nav links (top level) ──────────────────────── */
.topnav > a,
.topnav .nav-item > a {
  text-decoration: none;
  color: #444;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background var(--transition, 0.18s ease), color var(--transition, 0.18s ease);
  white-space: nowrap;
}

.topnav > a:hover,
.topnav .nav-item > a:hover {
  background: #f1f3f4;
  color: var(--brand, #1a73e8);
  text-decoration: none;
}

/* ─── Nav item wrapper (needed for dropdowns) ─────────── */
.topnav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════
   LEVEL 1 DROPDOWN
═══════════════════════════════════════════════════════ */
.topnav .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  background: #fff;
  min-width: 190px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  padding: 6px 0;
  z-index: 1001;
}

/* Show ONLY direct child dropdown on hover — not deeper levels */
.topnav .nav-item:hover > .dropdown-content {
  display: flex;
}

/* Level-1 links */
.topnav .dropdown-content > a,
.topnav .dropdown-content > .has-submenu > a {
  display: block;
  padding: 9px 16px;
  font-size: 0.875rem;
  color: #333;
  font-weight: 450;
  border-radius: 0;
  transition: background var(--transition, 0.18s ease), color var(--transition, 0.18s ease);
  white-space: nowrap;
}

.topnav .dropdown-content > a:hover {
  background: #f1f3f4;
  color: var(--brand, #1a73e8);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════
   LEVEL 2+ SUBMENU  (reusable at any depth)
═══════════════════════════════════════════════════════ */
.topnav .has-submenu {
  position: relative;
}

/* The submenu panel itself */
.topnav .has-submenu > .submenu-content {
  display: none;
  position: absolute;
  top: -6px;          /* align with the parent item */
  left: 100%;
  flex-direction: column;
  background: #fff;
  min-width: 180px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  padding: 6px 0;
  z-index: 1002;
}

/* Show ONLY the direct child submenu — > prevents cascade */
.topnav .has-submenu:hover > .submenu-content {
  display: flex;
}

/* Submenu links */
.topnav .submenu-content > a,
.topnav .submenu-content > .has-submenu > a {
  display: block;
  padding: 9px 16px;
  font-size: 0.875rem;
  color: #333;
  font-weight: 450;
  border-radius: 0;
  transition: background var(--transition, 0.18s ease), color var(--transition, 0.18s ease);
  white-space: nowrap;
}

.topnav .submenu-content > a:hover,
.topnav .submenu-content > .has-submenu > a:hover {
  background: #f1f3f4;
  color: var(--brand, #1a73e8);
  text-decoration: none;
}

/* Arrow indicator for items that have a submenu */
.topnav .has-submenu > a::after {
  content: " ›";
  font-size: 0.8rem;
  opacity: 0.55;
}

/* Each deeper level steps z-index up by 1 automatically
   because .submenu-content z-index increases with nesting */