/* ============================================================
   .uk-dropdown — generic dropdown primitive (loaded only on /docs/ui-kit)
   ============================================================
   Extracted from the working .uk-select-panel pattern in Forms — same
   visual language (rounded-xl card, primary-tinted shadow, opacity+scale
   open animation, primary chevron rotate) but content-agnostic so it can
   host menus, popovers, filter panels, command palettes, etc.

   This is NOT a copy of .uk-select; it's a content-agnostic shell. The
   custom-select stays as the canonical for native <select> enhancement —
   .uk-dropdown is for everything else (account menus, profile drawers,
   info popovers, filter dropdowns, …). When the first real modal use-case
   arrives, that gets its own canonical at that time — this primitive is
   anchored, not a viewport overlay.

   Slots:
     .uk-dropdown                    anchored root, owns position
       .uk-dropdown-trigger          the clickable opener (button / input;
                                       consumer adds .btn / .input chrome)
         .uk-dropdown-chevron        optional animated chevron SVG
       .uk-dropdown-panel            floating panel — open/close state on
                                       parent root via [data-state]
         .uk-dropdown-header         optional section header (uppercase
                                       tracked muted text)
         .uk-dropdown-item           common item row — link, button, etc.
         .uk-dropdown-divider        1px hairline between groups

   Modifiers on root:
     --align-end           panel anchored to the right edge of the trigger
     --align-center        panel horizontally centered on the trigger
     --up                  panel opens upward (above the trigger)
     --match-trigger-width panel width === trigger width (no auto-grow)

   JS contract (public/js/uk-dropdown.js):
     - Auto-wires every .uk-dropdown on DOMContentLoaded (skip with
       data-dropdown-no-auto="true").
     - Click on .uk-dropdown-trigger toggles. ESC and click-outside
       close. Multiple-open constraint: opening one closes the others.
     - Dispatches 'dropdown:open' / 'dropdown:close' on the root with
       detail = { container, panel, trigger }.
     - On open: data-state="open" on root, aria-expanded="true" on trigger,
       hidden attribute removed from panel, optional first-focusable focus
       (skip with data-no-focus="true" on root).
     - On programmatic close (ESC, item-click, API): focus restored to
       trigger. On click-outside close: focus is left where the user clicked.
     - data-close-on-select="true" on root: clicking any .uk-dropdown-item
       or [role="menuitem"] inside the panel closes the dropdown after the
       default action. Without the flag, clicks inside the panel do not
       close it (popover behaviour).
   ============================================================ */

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

/* ---------- Trigger ---------- */
.uk-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    /* No baked-in chrome — consumers add .btn / .input / etc. */
}

.uk-dropdown-trigger[disabled],
.uk-dropdown-trigger[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.uk-dropdown-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: currentColor;
    transition:
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        color var(--transition-fast);
}

.uk-dropdown[data-state="open"] .uk-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.uk-dropdown--up[data-state="open"] .uk-dropdown-chevron {
    /* Inverted base orientation when opening upward */
    transform: rotate(180deg);
}

.uk-dropdown--up .uk-dropdown-chevron {
    transform: rotate(180deg);
}

/* ---------- Panel ---------- */
.uk-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 100%;
    max-width: 24rem;
    width: max-content;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(var(--color-primary-rgb), 0.04),
        0 6px 24px rgba(var(--color-primary-rgb), 0.08);
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.2s;
}

.uk-dropdown[data-state="open"] .uk-dropdown-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s;
}

/* Alignment modifiers */
.uk-dropdown--align-end .uk-dropdown-panel {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.uk-dropdown--align-center .uk-dropdown-panel {
    left: 50%;
    transform: translate(-50%, -6px) scale(0.98);
    transform-origin: top center;
}

.uk-dropdown--align-center[data-state="open"] .uk-dropdown-panel {
    transform: translate(-50%, 0) scale(1);
}

/* Direction: up */
.uk-dropdown--up .uk-dropdown-panel {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(6px) scale(0.98);
    transform-origin: bottom center;
}

.uk-dropdown--up[data-state="open"] .uk-dropdown-panel {
    transform: translateY(0) scale(1);
}

.uk-dropdown--up.uk-dropdown--align-center .uk-dropdown-panel {
    transform: translate(-50%, 6px) scale(0.98);
}

.uk-dropdown--up.uk-dropdown--align-center[data-state="open"] .uk-dropdown-panel {
    transform: translate(-50%, 0) scale(1);
}

.uk-dropdown--up.uk-dropdown--align-end .uk-dropdown-panel {
    transform-origin: bottom right;
}

/* Width: match trigger */
.uk-dropdown--match-trigger-width .uk-dropdown-panel {
    width: 100%;
    max-width: 100%;
}

/* ---------- Inner helpers ---------- */
.uk-dropdown-header {
    padding: 8px 12px 4px;
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.uk-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--font-md);
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.uk-dropdown-item:hover,
.uk-dropdown-item:focus-visible {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary-light);
    outline: none;
}

.uk-dropdown-item[aria-disabled="true"],
.uk-dropdown-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

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

.uk-dropdown-item--danger:hover,
.uk-dropdown-item--danger:focus-visible {
    background: rgba(var(--color-error-rgb), 0.1);
    color: var(--color-error);
}

.uk-dropdown-item-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

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

.uk-dropdown-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--color-border);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .uk-dropdown-chevron,
    .uk-dropdown-panel,
    .uk-dropdown-item {
        transition: none;
    }
    .uk-dropdown-panel {
        transform: none;
    }
    .uk-dropdown[data-state="open"] .uk-dropdown-panel,
    .uk-dropdown--align-center[data-state="open"] .uk-dropdown-panel,
    .uk-dropdown--up[data-state="open"] .uk-dropdown-panel {
        transform: none;
    }
    .uk-dropdown--align-center .uk-dropdown-panel {
        transform: translateX(-50%);
    }
    .uk-dropdown--align-center[data-state="open"] .uk-dropdown-panel {
        transform: translateX(-50%);
    }
}