/* Conference Selector Styles for Navigation Sidebar */
/* Used in: app/views/navigation/_navigation_sidebar.html.erb */

.conference-selector {
  padding: var(--size-4);
  border-bottom: 1px solid var(--outline-variant);
}

/* Reuse existing dropdown styles, but position dropdown below trigger */
.conference-selector .user-dropdown-menu {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: var(--size-2);
  max-height: 400px;
  overflow-y: auto;
}

/* Conference item in dropdown */
.conference-item {
  display: flex;
  align-items: center;
  gap: var(--size-3);
}

.conference-item.active {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

.conference-item-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.conference-item-name {
  font-weight: var(--font-weight-5);
  font-size: var(--font-size-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conference-item-date {
  font-size: var(--font-size-1);
  color: var(--on-layer-widget);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Override the arrow rotation for conference dropdown */
.conference-selector .user-menu-arrow {
  transform: rotate(0deg);
}

.conference-selector .open .user-menu-arrow {
  transform: rotate(180deg);
}

/* Add .initials class that was missing */
.initials {
  text-transform: uppercase;
  font-weight: var(--font-weight-5);
}