/* ========== NAVBAR STRUCTURE ========== */
#navbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--navbar-height);
  z-index: 1350;
  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: 0 24px;
  max-width: 100%;
  margin: 0 auto;
  gap: 16px;
  height: 100%;
}

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

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

#navbar #oria-navbar[hidden],
#navbar .navbar-user-project[hidden] { display: none !important; }
.navbar-user-project { display: none; }
#navbar #oria-navbar { flex-shrink: 0; }

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

#navbar .navbar-project[hidden],
#navbar .navbar-mobile-toggle[hidden],
#navbar .navbar-user-dropdown button[hidden],
#navbar .navbar-user-profile-email[hidden] {
  display: none !important;
}

.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: 0 16px;
    gap: 8px;
  }
  
  .navbar-right {
    gap: 8px;
  }
  
  .navbar-project {
    display: none;
  }
  .navbar-user-project {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    overflow-wrap: anywhere;
  }
}

/* ========== 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: 0px;
  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(--bg-tertiary);
}

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

#navbar .member-avatar {
  box-shadow: none;
}

/* 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;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - var(--navbar-height) - 16px);
  overflow-y: auto;
}
#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(--bg-tertiary); }

.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;
  overflow-wrap: anywhere;
}

.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 {
    position: fixed;
    top: calc(var(--navbar-height) + 8px);
    right: 12px;
    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(--bg-tertiary)}
.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px}
.brand-icon svg{display:block}
.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} }
@media (max-width:480px) {
  .navbar-container { padding-inline: 8px; }
  .navbar-left, .navbar-right { gap: 4px; }
  .navbar-brand { padding-inline: 4px; }
  .navbar-mobile-toggle { width: 36px; }
  #navbar .navbar-user-btn { min-width: 36px; }
}