/* ========================================
   Dropdown Menu Component
   Centralized styles for all dropdown menus
   ======================================== */

/* Base Dropdown Container */
.dropdown-menu,
.menu-dropdown,
.deck-menu-dropdown,
.view-menu-dropdown,
.deck-modal-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: var(--spacing-xs) 0;
}

.dropdown-menu.hidden,
.menu-dropdown.hidden,
.deck-menu-dropdown.hidden,
.view-menu-dropdown.hidden,
.deck-modal-menu-dropdown.hidden {
    display: none;
}

/* Right-aligned variant */
.dropdown-menu.dropdown-right,
.view-menu-dropdown {
    left: auto;
    right: 0;
}

/* Smaller width variant */
.dropdown-menu.dropdown-narrow,
.view-menu-dropdown {
    min-width: 180px;
}

/* Menu Items */
.menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

.menu-item:hover {
    background: var(--dropdown-item-hover-bg);
}

/* Menu Icon */
.menu-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Menu Divider */
.menu-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--spacing-xs) 0;
}

/* Submenu Toggle Item */
.menu-item-submenu {
    position: relative;
    justify-content: space-between;
}

.menu-arrow {
    font-size: 10px;
    margin-left: auto;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.menu-item-submenu:hover .menu-arrow {
    transform: translateX(2px);
}

/* Submenu Container */
.menu-submenu {
    padding-left: 24px;
    background: var(--surface-tertiary);
}

.menu-submenu.hidden {
    display: none;
}

.menu-submenu .menu-item {
    font-size: 0.8rem;
    padding: 8px 14px;
}

/* Danger Item (e.g., Delete, Clear) */
.menu-item-danger {
    color: var(--color-error);
}

.menu-item-danger:hover {
    background: var(--color-error-bg, rgba(231, 76, 60, 0.1));
}

/* ========================================
   High-specificity overrides for deck modal
   (needed to match production specificity)
   ======================================== */
#deckModal .deck-modal-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: var(--spacing-xs) 0;
}

#deckModal .deck-modal-menu-dropdown.hidden {
    display: none;
}

#deckModal .deck-modal-menu-dropdown .menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

#deckModal .deck-modal-menu-dropdown .menu-item:hover {
    background: var(--dropdown-item-hover-bg);
}

#deckModal .deck-modal-menu-dropdown .menu-icon {
    font-size: 16px;
}

#deckModal .deck-modal-menu-dropdown .menu-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--spacing-xs) 0;
}

#deckModal .menu-item-submenu {
    position: relative;
    justify-content: space-between;
}

#deckModal .menu-arrow {
    font-size: 10px;
    margin-left: auto;
    transition: transform 0.2s ease;
}

#deckModal .menu-item-submenu:hover .menu-arrow {
    transform: translateX(2px);
}

#deckModal .menu-submenu {
    padding-left: 24px;
    background: var(--surface-tertiary);
}

#deckModal .menu-submenu.hidden {
    display: none;
}

#deckModal .menu-submenu .menu-item {
    font-size: 0.8rem;
    padding: 8px 14px;
}

/* ========================================
   High-specificity overrides for deck builder menu
   ======================================== */
#deckMenuDropdown.deck-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: var(--spacing-xs) 0;
}

#deckMenuDropdown .menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

#deckMenuDropdown .menu-item:hover {
    background: var(--dropdown-item-hover-bg);
}

#deckMenuDropdown .menu-icon {
    font-size: 16px;
}

#deckMenuDropdown .menu-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--spacing-xs) 0;
}

#deckMenuDropdown .menu-submenu {
    padding-left: 24px;
    background: var(--surface-tertiary);
}

#deckMenuDropdown .menu-submenu.hidden {
    display: none;
}

#deckMenuDropdown .menu-submenu .menu-item {
    font-size: 0.8rem;
    padding: 8px 14px;
}