/* ========================================
   Dropdown Menu Component — Newtype v2
   Shared chrome for .menu-dropdown / .deck-menu-dropdown /
   .view-menu-dropdown / .deck-modal-menu-dropdown.
   Note: .dropdown-menu (main nav) is owned by navigation.css and
   intentionally excluded here.
   ======================================== */

/* Base shell */
.menu-dropdown,
.deck-menu-dropdown,
.view-menu-dropdown,
.deck-modal-menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--bg-2);
    border: 1px solid var(--neon);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px var(--neon-glow);
    z-index: 1000;
    padding: var(--spacing-xs) 0;
    font-family: var(--font-mono);
}

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

/* Right-aligned variant */
.view-menu-dropdown {
    left: auto;
    right: 0;
    min-width: 180px;
}

/* Items — mono uppercase with a transparent left accent that lights
   neon on hover (matches the search-suggestions row treatment). */
.menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 11px; /* HUD micro */
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast), border-left-color var(--transition-fast);
}

.menu-item:hover {
    background: var(--hover-bg);
    border-left-color: var(--neon);
    color: var(--neon);
}

/* Divider — thin neon-tinted line */
.menu-divider {
    height: 1px;
    background: var(--border);
    margin: var(--spacing-xs) 0;
}

/* Submenu trigger — label on the left, ▸ arrow on the right */
.menu-item-submenu {
    justify-content: space-between;
}

.menu-item-label {
    flex: 1;
}

.menu-arrow {
    font-size: 10px;
    margin-left: auto;
    color: var(--text-3);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

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

/* Submenu — nested, slightly indented, tinted bg to distinguish from
   parent items. Same item treatment otherwise. */
.menu-submenu {
    padding-left: var(--spacing-lg);
    background: rgba(6, 8, 5, 0.5);
    border-left: 2px solid var(--border);
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
}

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

.menu-submenu .menu-item {
    font-size: 10px;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Danger item — red accent for destructive actions like Clear Deck */
.menu-item-danger {
    color: var(--color-error);
}

.menu-item-danger:hover {
    background: var(--color-error-bg);
    border-left-color: var(--color-error);
    color: var(--color-error-light);
}

/* ========================================
   #deckModal overrides — same shell, ensures the modal's higher
   stacking context doesn't get pre-empted by anything in the
   default cascade.
   ======================================== */
#deckModal .deck-modal-menu-dropdown {
    background: var(--bg-2);
    border: 1px solid var(--neon);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px var(--neon-glow);
    padding: var(--spacing-xs) 0;
    font-family: var(--font-mono);
}

#deckModal .deck-modal-menu-dropdown .menu-item {
    border-left: 2px solid transparent;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background var(--transition-fast), color var(--transition-fast), border-left-color var(--transition-fast);
}

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

#deckModal .deck-modal-menu-dropdown .menu-divider {
    background: var(--border);
}

#deckModal .menu-submenu {
    padding-left: var(--spacing-lg);
    background: rgba(6, 8, 5, 0.5);
    border-left: 2px solid var(--border);
}

#deckModal .menu-submenu .menu-item {
    font-size: 10px;
    padding: var(--spacing-xs) var(--spacing-sm);
}