/* ========== NAVBAR STRUCTURE ========== */
#navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  max-width: 100%;
  margin: 0 auto;
  gap: 16px;
  height: var(--navbar-height, 50px);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.navbar-project {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--secondary-hover);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
}

.navbar-project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-project-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: help;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.navbar-project-role:hover {
  opacity: 1;
}

.navbar-project-role svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 12px 16px;
    gap: 8px;
  }
  
  .navbar-right {
    gap: 8px;
  }
  
  .navbar-project {
    display: none;
  }
}

/* ========== USER MENU ========== */
/* Navbar dropdown robust layout + brand + burger */
#navbar .navbar-user{ position: relative; }

/* User button */
#navbar .navbar-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--card-border);
  background: var(--bg-primary);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  min-width: 48px;
  justify-content: center;
}

#navbar .navbar-user-btn:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  background: var(--secondary-hover);
}

#navbar .navbar-user-btn:active {
  transform: scale(0.98);
}

/* User avatar */
#navbar .navbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navbar-avatar-bg);
  color: var(--navbar-avatar-color);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* Chevron icon */
#navbar .navbar-user-chevron {
  display: inline-block;
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  line-height: 1;
}

#navbar .navbar-user-btn[aria-expanded="true"] .navbar-user-chevron {
  transform: rotate(180deg);
}

/* Dropdown */
#navbar .navbar-user-dropdown[hidden]{ display: none !important; }
#navbar .navbar-user-dropdown{
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px; background: var(--bg-primary);
  border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.10);
  padding: 8px; z-index: 1000; display: block;
}
#navbar .navbar-user-dropdown button{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; border:0; padding:10px 12px;
  border-radius:8px; width:100%; text-align:left; color:var(--text-primary);
  font:inherit; display:flex; align-items:center; gap:10px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#navbar .navbar-user-dropdown button:hover{ background: var(--secondary-hover); }

.navbar-user-dropdown .dropdown-icon{
  flex-shrink:0;
  color: var(--text-secondary);
  display:inline-flex;
}

.navbar-user-dropdown button:hover .dropdown-icon{
  color: var(--text-primary);
}

.navbar-user-dropdown .dropdown-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.2;
}

.navbar-user-dropdown .dropdown-meta{
  font-size:12px;
  color: var(--text-muted);
}

.navbar-user-profile{
  padding:12px;
  border-bottom:1px solid var(--card-border);
  margin-bottom:8px;
}

.navbar-user-profile-name{
  font-weight:600;
  color: var(--text-primary);
}

.navbar-user-profile-email{
  font-size:13px;
  color: var(--text-muted);
}

.navbar-user-divider{
  height:1px;
  background: var(--card-border);
  margin:8px 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #navbar .navbar-user-btn {
    padding: 6px;
    gap: 4px;
  }
  
  #navbar .navbar-user-chevron {
    display: none;
  }
  
  #navbar .navbar-user-dropdown {
    right: -8px;
    min-width: 200px;
  }
}

/* ========== BRAND BUTTON ========== */.navbar-brand{display:inline-flex;align-items:center;gap:8px;color:var(--text-primary);font-weight:700;border:0;background:transparent;padding:6px 10px;border-radius:10px}
.navbar-brand:hover{background:var(--secondary-hover)}
.brand-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--brand-badge-bg);color:var(--brand-badge-color);font-weight:800;letter-spacing:-0.02em}
.brand-title{white-space:nowrap}
@media (max-width:768px){ .brand-title{display:none} }

.navbar-mobile-toggle{display:none;border:1px solid var(--card-border);background:var(--bg-primary);border-radius:12px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.navbar-mobile-toggle:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.navbar-mobile-toggle svg{width:22px;height:22px}
@media (max-width:1024px){ .navbar-mobile-toggle{display:inline-flex} }