/* =================================================================
   context-menu.css — Right-click context menu, toast notifications,
   menu badges, and the danger-variant item used for destructive actions.
   ================================================================= */

/* "open" badge next to "Add to current playlist" in right-click menus. */
.context-menu-item .label .ctx-menu-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(var(--accent-primary-rgb), 0.22);
    color: var(--accent-primary);
    vertical-align: 1px;
}

.context-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: var(--shadow-md);
    z-index: 2000;
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-primary);
}
.context-menu-item:hover {
    background: var(--bg-card-hover);
}
.context-menu-item .icon {
    width: 20px;
    height: 16px;
    text-align: center;
    font-size: 14px;
    /* Keep emoji-fallback icons centered AND give SVG line-art icons
       a clean, fixed-size box so they line up across rows. The svg
       inherits color from the text via stroke="currentColor" so
       icons render in the same flat white as the menu label. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}
.context-menu-item .icon .icon-svg {
    width: 16px;
    height: 16px;
}
.context-menu-item-danger .icon { color: var(--state-danger); }
.context-menu-item .label {
    flex: 1;
}
.context-menu-item .shortcut {
    color: var(--text-muted);
    font-size: 12px;
}
.context-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 8px 0;
}
.context-toast {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card);
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s;
    z-index: 2001;
    color: var(--text-primary);
}
.context-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Typed variants — color the left edge + tint the background so the
   kind registers at a glance without shouting. */
.context-toast-success {
    border-left: 4px solid var(--state-success);
    background: linear-gradient(90deg, rgba(var(--state-success-rgb),0.15) 0%, var(--bg-card) 40%);
}
.context-toast-info,
.context-toast-warn {
    border-left: 4px solid var(--state-warning);
    background: linear-gradient(90deg, rgba(var(--accent-secondary-rgb),0.15) 0%, var(--bg-card) 40%);
}
.context-toast-error {
    border-left: 4px solid var(--state-danger);
    background: linear-gradient(90deg, rgba(var(--state-danger-rgb),0.18) 0%, var(--bg-card) 40%);
}
.empty-message {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* =================================================================
   Context menu — danger item (for destructive actions)
   ================================================================= */

.context-menu-item-danger {
    color: var(--state-danger);
}

.context-menu-item-danger:hover {
    background: rgba(var(--state-danger-rgb), 0.12);
    color: var(--state-danger);
}

.context-menu-item-danger .icon {
    color: inherit;
}

/* =================================================================
   Context menu — submenu (Sync to → device, etc.)
   ================================================================= */

.context-menu-item.has-submenu .submenu-arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1;
}

.context-menu-item.has-submenu:hover .submenu-arrow {
    color: var(--text-primary);
}

/* Submenus piggyback on .context-menu styling but get their own
   class so the close-handler can target them and remove them. */
.context-menu-sub {
    /* Visual parity with root, but lifted slightly so the seam between
       parent item and submenu reads as connected. */
}

/* =================================================================
   Context menu — disabled item (e.g. offline device in Sync submenu)
   ================================================================= */

.context-menu-item-disabled {
    color: var(--text-muted);
    opacity: 0.55;
    cursor: not-allowed;
}

.context-menu-item-disabled:hover {
    background: transparent;
}