/**
 * RADEXEL Design System - Dropdown Component
 *
 * Used for topbar profile dropdown, context menus, and action menus.
 * Supports separator, active state, danger items, and icons.
 */

/* ==========================================================================
   Dropdown Container
   ========================================================================== */

.dropdown {
  position: relative;
  display: inline-flex;
}


/* ==========================================================================
   Dropdown Trigger
   ========================================================================== */

.dropdown__trigger {
  cursor: pointer;
}


/* ==========================================================================
   Dropdown Menu
   ========================================================================== */

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  max-width: 320px;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity var(--duration-fast) var(--ease-default),
    visibility var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

/* Visible state */
.dropdown-menu.visible,
.dropdown-menu[aria-hidden="false"],
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Left-aligned variant */
.dropdown-menu--left {
  right: auto;
  left: 0;
  transform-origin: top left;
}

/* Center-aligned variant */
.dropdown-menu--center {
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-4px) scale(0.98);
  transform-origin: top center;
}

.dropdown-menu--center.visible {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Upward variant */
.dropdown-menu--up {
  top: auto;
  bottom: calc(100% + var(--space-1));
  transform-origin: bottom right;
}


/* ==========================================================================
   Dropdown Item
   ========================================================================== */

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.dropdown-item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.dropdown-item:focus-visible {
  outline: 2px solid var(--rdx-blue);
  outline-offset: -2px;
}

.dropdown-item:active {
  background: var(--color-surface-active);
}

/* Active/selected item */
.dropdown-item.active,
.dropdown-item[aria-current="true"] {
  background: var(--color-info-light);
  color: var(--rdx-blue);
  font-weight: var(--font-weight-medium);
}

/* Disabled item */
.dropdown-item:disabled,
.dropdown-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Danger item */
.dropdown-item--danger,
.dropdown-item.danger {
  color: var(--color-danger);
}

.dropdown-item--danger:hover,
.dropdown-item.danger:hover {
  background: var(--color-danger-light);
  color: var(--color-danger);
}


/* ==========================================================================
   Dropdown Item Parts
   ========================================================================== */

.dropdown-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.dropdown-item__icon svg {
  width: 16px;
  height: 16px;
}

.dropdown-item:hover .dropdown-item__icon {
  color: inherit;
}

.dropdown-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-item__shortcut {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.dropdown-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  background: var(--color-danger);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}


/* ==========================================================================
   Dropdown Separator
   ========================================================================== */

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


/* ==========================================================================
   Dropdown Header (Section Label)
   ========================================================================== */

.dropdown-header {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ==========================================================================
   User Menu Dropdown (Specific to topbar)
   ========================================================================== */

.user-menu {
  position: relative;
}

.user-dropdown {
  min-width: 220px;
}

.user-dropdown__profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-light);
}

.user-dropdown__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--rdx-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.user-dropdown__info {
  flex: 1;
  min-width: 0;
}

.user-dropdown__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown__role {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}