/* Dropdown Component - Native Popover API Edition
   Philosophy: Dropdowns float politely above content, guiding with calm voice and gentle elevation
   Uses: Native Popover API for top-layer rendering, --elevation-floating, semantic color tokens */

/* Dropdown menu - floating surface with polite elevation in top layer
   Derivation: Menus are above-surface elements, use --elevation-floating for lifted appearance
   Position: Top layer via Popover API (no clipping by overflow:hidden)
   Browser handles: Light dismiss, escape key, focus management */
.dropdown-menu {
  @apply w-56 rounded-xl p-1;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--elevation-floating);

  /* Smooth fade-in animation when popover opens */
  transition: opacity var(--motion-micro) var(--ease-natural),
              transform var(--motion-micro) var(--ease-natural),
              overlay var(--motion-micro) var(--ease-natural) allow-discrete,
              display var(--motion-micro) var(--ease-natural) allow-discrete;

  /* Start state for animation */
  opacity: 0;
  transform: scale(0.95);
}

/* Popover opening animation */
.dropdown-menu:popover-open {
  opacity: 1;
  transform: scale(1);
}

/* Starting style for transition */
@starting-style {
  .dropdown-menu:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Dropdown item wrapper - ensures clean spacing */
.dropdown-menu-item-wrapper {
  @apply block;
}

/* Dropdown item - calm voice for readable navigation with icon/kbd support
   Derivation: Navigation items use calm tone (400 weight) for comfortable scanning
   Layout: Flexbox with icon start, label center, kbd end
   Hover: Subtle background lift using --color-surface-muted */
.dropdown-item {
  @apply w-full text-left flex items-center gap-3 rounded-lg text-sm cursor-pointer;
  padding: var(--space-breath) calc(var(--space-breath) * 1.25);
  color: var(--color-text-primary);
  font-weight: var(--tone-calm);
  transition: all var(--motion-micro) var(--ease-natural);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-surface-muted);
  outline: none;
}

/* Dropdown item icon - positioned at start
   Derivation: Icons use secondary color for visual hierarchy */
.dropdown-item-icon {
  @apply flex-shrink-0 flex items-center justify-center;
  color: var(--color-text-secondary);
}

.dropdown-item:hover .dropdown-item-icon,
.dropdown-item:focus .dropdown-item-icon {
  color: var(--color-text-primary);
}

/* Dropdown item label - takes available space */
.dropdown-item-label {
  @apply flex-1;
}

/* Dropdown item keyboard hint - positioned at end
   Derivation: Subtle badge-like appearance to teach shortcuts without demanding attention */
.dropdown-item-kbd {
  @apply flex-shrink-0 rounded text-xs px-1.5 py-0.5;
  background-color: var(--color-surface-muted);
  color: var(--color-text-tertiary);
  font-weight: var(--tone-whisper);
  border: 1px solid var(--color-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Dropdown item for destructive actions
   Derivation: Destructive actions use error semantics to warn users */
.dropdown-item-danger {
  @apply w-full text-left flex items-center gap-3 rounded-lg text-sm cursor-pointer;
  padding: var(--space-breath) calc(var(--space-breath) * 1.25);
  color: var(--color-error-600);
  font-weight: var(--tone-calm);
  transition: all var(--motion-micro) var(--ease-natural);
}

.dropdown-item-danger:hover,
.dropdown-item-danger:focus {
  background-color: color-mix(in oklch, var(--color-error-500), transparent 92%);
  outline: none;
}

.dropdown-item-danger .dropdown-item-icon {
  color: var(--color-error-600);
}

.dropdown-item-danger:hover .dropdown-item-icon,
.dropdown-item-danger:focus .dropdown-item-icon {
  color: var(--color-error-700);
}

/* Dark mode adjustments */
[data-theme="dark"] .dropdown-item-danger:hover,
[data-theme="dark"] .dropdown-item-danger:focus {
  background-color: color-mix(in oklch, var(--color-error-500), transparent 80%);
}

/* Dropdown divider - subtle separation
   Derivation: Dividers use --color-border for consistent visual weight */
.dropdown-divider {
  @apply h-px my-1;
  background-color: var(--color-border);
}

/* Dropdown group heading - section label for grouped items
   Derivation: Group headings use loud tone (600 weight) and tertiary color for visual hierarchy
   Usage: Organize menu items into semantic groups (Account, Billing, etc.) */
.dropdown-group-heading {
  @apply text-xs px-3 py-2 mt-2 first:mt-0;
  color: var(--color-text-tertiary);
  font-weight: var(--tone-loud);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dropdown checkbox item - interactive checkbox for filters
   Derivation: Checkbox items use calm voice and custom checkbox styling
   Usage: Multi-select filters, permissions, settings */
.dropdown-checkbox-item {
  @apply flex items-center gap-3 rounded-lg text-sm cursor-pointer;
  padding: var(--space-breath) calc(var(--space-breath) * 1.25);
  color: var(--color-text-primary);
  font-weight: var(--tone-calm);
  transition: all var(--motion-micro) var(--ease-natural);
}

.dropdown-checkbox-item:hover,
.dropdown-checkbox-item:focus {
  background-color: var(--color-surface-muted);
  outline: none;
}

/* Hidden native checkbox - we'll use custom styling */
.dropdown-checkbox {
  @apply sr-only;
}

/* Custom checkbox icon - only visible when checked
   Derivation: Primary color for selected state, smooth fade-in */
.dropdown-checkbox-icon {
  @apply flex-shrink-0 flex items-center justify-center size-4 rounded border;
  border-color: var(--color-border);
  color: transparent;
  transition: all var(--motion-micro) var(--ease-natural);
}

.dropdown-checkbox:checked + .dropdown-checkbox-icon {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: white;
}

.dropdown-checkbox:focus + .dropdown-checkbox-icon {
  @apply ring-2 ring-offset-1;
  ring-color: var(--color-primary-500);
}

/* Checkbox label */
.dropdown-checkbox-label {
  @apply flex-1;
}

/* Dropdown radio item - interactive radio button for single-choice filters
   Derivation: Radio items use calm voice and custom circular styling
   Usage: Sort order, view mode, single-choice settings */
.dropdown-radio-item {
  @apply flex items-center gap-3 rounded-lg text-sm cursor-pointer;
  padding: var(--space-breath) calc(var(--space-breath) * 1.25);
  color: var(--color-text-primary);
  font-weight: var(--tone-calm);
  transition: all var(--motion-micro) var(--ease-natural);
}

.dropdown-radio-item:hover,
.dropdown-radio-item:focus {
  background-color: var(--color-surface-muted);
  outline: none;
}

/* Hidden native radio - we'll use custom styling */
.dropdown-radio {
  @apply sr-only;
}

/* Custom radio icon - circular with dot when selected
   Derivation: Primary color for selected state, circular for radio semantics */
.dropdown-radio-icon {
  @apply flex-shrink-0 flex items-center justify-center size-4 rounded-full border;
  border-color: var(--color-border);
  color: transparent;
  transition: all var(--motion-micro) var(--ease-natural);
}

.dropdown-radio:checked + .dropdown-radio-icon {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: white;
}

.dropdown-radio:focus + .dropdown-radio-icon {
  @apply ring-2 ring-offset-1;
  ring-color: var(--color-primary-500);
}

/* Radio label */
.dropdown-radio-label {
  @apply flex-1;
}