/**
 * 3Syxty Studio — Dropdown Menu Component
 *
 * Generic positioned dropdown menus for action buttons,
 * user menus, filter dropdowns, etc. Extends beyond context-menu
 * with header/footer sections and richer item types.
 */

/* -----------------------------------------------------------------------
   Dropdown Container
   ----------------------------------------------------------------------- */

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

/* -----------------------------------------------------------------------
   Dropdown Panel
   ----------------------------------------------------------------------- */

.dropdown-panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    min-width: 180px;
    max-width: 320px;
    max-height: 360px;
    padding: var(--space-1);
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-heavy);
    z-index: var(--z-dropdown);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    animation: scale-in 80ms ease-out forwards;
    transform-origin: top left;
}

.dropdown-panel[data-align="right"] {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.dropdown-panel[data-align="center"] {
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
}

.dropdown-panel[data-position="top"] {
    top: auto;
    bottom: calc(100% + var(--space-1));
    transform-origin: bottom left;
}

.dropdown-panel[data-position="top"][data-align="right"] {
    transform-origin: bottom right;
}

/* -----------------------------------------------------------------------
   Dropdown Header / Footer
   ----------------------------------------------------------------------- */

.dropdown-header {
    padding: var(--space-2) var(--space-3) var(--space-1-5);
    font: var(--type-overline);
    color: var(--text-muted);
    pointer-events: none;
}

.dropdown-footer {
    padding: var(--space-1-5) var(--space-3) var(--space-2);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-1);
}

/* -----------------------------------------------------------------------
   Dropdown Items
   ----------------------------------------------------------------------- */

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    padding: var(--space-1-5) var(--space-2-5);
    font: var(--type-body-sm);
    color: var(--text-primary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 50ms ease;
    outline: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--accent-primary-subtle);
}

.dropdown-item:active {
    background-color: var(--accent-primary-muted);
}

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

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

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

/* Disabled */
.dropdown-item[disabled],
.dropdown-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Active / Selected */
.dropdown-item-active {
    background-color: var(--accent-primary-subtle);
    color: var(--accent-primary);
    font-weight: 500;
}

/* -----------------------------------------------------------------------
   Item Parts
   ----------------------------------------------------------------------- */

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

.dropdown-item-icon svg {
    width: 14px;
    height: 14px;
}

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

.dropdown-item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-item-desc {
    font: var(--type-caption);
    color: var(--text-muted);
    margin-top: 1px;
}

.dropdown-item-shortcut {
    font: var(--type-caption);
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: var(--space-3);
}

.dropdown-item-badge {
    flex-shrink: 0;
    margin-left: auto;
}

.dropdown-item-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--accent-primary);
    margin-left: auto;
}

/* -----------------------------------------------------------------------
   Separator & Group
   ----------------------------------------------------------------------- */

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

.dropdown-group-label {
    padding: var(--space-2) var(--space-2-5) var(--space-1);
    font: var(--type-overline);
    color: var(--text-muted);
    pointer-events: none;
}

/* -----------------------------------------------------------------------
   Rich Item (two-line with description)
   ----------------------------------------------------------------------- */

.dropdown-item-rich {
    align-items: flex-start;
    padding: var(--space-2) var(--space-2-5);
}

.dropdown-item-rich .dropdown-item-icon {
    margin-top: 2px;
}

/* -----------------------------------------------------------------------
   User Item (avatar + name + email)
   ----------------------------------------------------------------------- */

.dropdown-item-user {
    gap: var(--space-2-5);
    padding: var(--space-2-5) var(--space-2-5);
}

.dropdown-item-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.dropdown-item-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------------------------------
   Width Variants
   ----------------------------------------------------------------------- */

.dropdown-panel-sm { min-width: 140px; max-width: 220px; }
.dropdown-panel-lg { min-width: 240px; max-width: 400px; }
.dropdown-panel-xl { min-width: 320px; max-width: 480px; }