/* ==========================================================================
   Dropdown Menu
   Generic reusable menu surface — profile menu, notifications panel,
   filter panels, and future navigation/selection dropdowns all share it.
   ========================================================================== */

.navbar-profile,
.navbar-dropdown {
  position: relative;
}

.dropdown-menu--feed {
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
}

.dropdown-menu-view-all {
  display: block;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.dropdown-menu-view-all:hover {
  background-color: var(--color-surface-secondary);
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: background-color var(--transition-fast);
}

.profile-trigger:hover {
  background-color: var(--color-surface-secondary);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  min-width: 220px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  z-index: 60;
}

.dropdown-menu.is-open {
  display: block;
  animation: dropdown-in var(--transition-base) ease-out;
}

.dropdown-menu--right {
  right: 0;
}

.dropdown-menu-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
}

.dropdown-menu-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.dropdown-menu-email {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.dropdown-menu-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-2) 0;
}

.dropdown-menu-list {
  display: flex;
  flex-direction: column;
}

.dropdown-menu-list a,
.dropdown-menu-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast);
}

.dropdown-menu-list a:hover,
.dropdown-menu-logout:hover {
  background-color: var(--color-surface-secondary);
}

.dropdown-menu-logout {
  color: var(--color-danger);
}

@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}