/* RightClickMenu.css — glass (macOS-style)
 * ----------------------------------------
 * HIGH SPECIFICITY rewrite. Every rule is prefixed with `#driveRightClickMenu`
 * so it outranks the host page's generic rules (e.g. global `div { width:
 * 100%; }` or `* { margin: 0; padding: 0 }` resets). Layout-critical props
 * that hostile resets love to overwrite (width, padding, margin, display,
 * height) are marked `!important`. Everything else stays unflagged so we
 * inherit the host's type / color defaults when they're sensible.
 *
 * No JS or markup changes — the original template replacement pipeline and
 * event handlers in RightClickMenu.js continue to work untouched.
 */

/* ============================================================
 *  Root surface + submenu surface — glass
 * ============================================================ */
#driveRightClickMenu {
    display: none;
    position: absolute !important;
    z-index: 1000;

    width: 240px !important;
    min-width: 220px !important;
    max-width: 280px !important;
    height: auto !important;
    padding: 6px !important;
    margin: 0 !important;
    overflow: visible !important;

    /* Glass fill + frosted blur. */
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);

    border: 0.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;

    box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.08);

    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: -0.01em;

    animation: driveRightClickMenuIn 140ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes driveRightClickMenuIn {
    from {
        opacity: 0;
        transform: translateY(-3px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Submenu uses a class, not an id. We still prefix with #driveRightClickMenu
 * so the compound selector's specificity beats any generic .class rule. */
#driveRightClickMenu .driveRightClickSubMenu {
    display: none;
    position: absolute !important;
    z-index: 1001;

    width: 200px !important;
    min-width: 180px !important;
    max-width: 260px !important;
    height: auto !important;
    padding: 6px !important;
    margin: 0 !important;
    overflow: visible !important;

    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);

    border: 0.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;

    box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.08);

    color: #111;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: -0.01em;

    animation: driveRightClickMenuIn 140ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

#driveRightClickMenu #driveRightClickMenuItems,
#driveRightClickMenu .driveRightClickSubMenuItems {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: block;
    background: transparent !important;
}

/* ============================================================
 *  Menu items (and submenu items — same treatment)
 * ============================================================ */
#driveRightClickMenu .driveRightClickMenuItem,
#driveRightClickMenu .driveRightClickSubMenuItem {
    position: relative !important;
    display: flex;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 10px !important;
    margin: 1px 0 !important;
    border: none !important;
    border-radius: 7px !important;
    background: transparent !important;
    cursor: pointer !important;
    color: #111 !important;
    text-decoration: none !important;
    overflow: visible !important;
    transition: background-color 120ms cubic-bezier(0.25, 0.1, 0.25, 1),
        color 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
    border-bottom: 1px solid #ededed !important;
}

#driveRightClickMenu .driveRightClickMenuItem:hover,
#driveRightClickMenu .driveRightClickSubMenuItem:hover {
    background-color: #2C4135 !important;
    color: #ffffff !important;
}

#driveRightClickMenu .driveRightClickMenuItem:active,
#driveRightClickMenu .driveRightClickSubMenuItem:active {
    background-color: #213328 !important;
}

#driveRightClickMenu a.driveRightClickMenuItem,
#driveRightClickMenu a.driveRightClickSubMenuItem,
#driveRightClickMenu a.driveRightClickMenuItem:visited,
#driveRightClickMenu a.driveRightClickSubMenuItem:visited {
    color: #111 !important;
    text-decoration: none !important;
}

#driveRightClickMenu a.driveRightClickMenuItem:hover,
#driveRightClickMenu a.driveRightClickSubMenuItem:hover {
    color: #ffffff !important;
}

/* ============================================================
 *  Text inside items
 * ============================================================ */
#driveRightClickMenu .driveRightClickMenuText,
#driveRightClickMenu .driveRightClickSubMenuText {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
}

/* ============================================================
 *  Submenu chevron (the small arrow on the right of parent rows)
 * ============================================================ */
#driveRightClickMenu .driveRightClickMenuItemHasSubmenuIcon {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: auto !important;
    height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;

    opacity: 0.45;
    transition: opacity 120ms cubic-bezier(0.25, 0.1, 0.25, 1),
        filter 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

#driveRightClickMenu .driveRightClickMenuItem:hover .driveRightClickMenuItemHasSubmenuIcon,
#driveRightClickMenu .driveRightClickMenuItemHasSubMenu:hover .driveRightClickMenuItemHasSubmenuIcon {
    opacity: 0.95;
    filter: brightness(0) invert(1);
}

/* ============================================================
 *  Destructive actions — red selection fill on hover
 *
 *  Template renders each row with an inline `onclick` attribute whose value
 *  contains the action string (e.g. "MoonDrive.showDeleteItemPopup()"). Match
 *  on substrings — inert for anything that doesn't match.
 * ============================================================ */
#driveRightClickMenu .driveRightClickMenuItem[onclick*="showDelete"]:hover,
#driveRightClickMenu .driveRightClickMenuItem[onclick*="removeFromDownloadBox"]:hover {
    background-color: #FE0216 !important;
    color: #ffffff !important;
}

#driveRightClickMenu .driveRightClickMenuItem[onclick*="showDelete"]:hover .driveRightClickMenuItemHasSubmenuIcon,
#driveRightClickMenu .driveRightClickMenuItem[onclick*="removeFromDownloadBox"]:hover .driveRightClickMenuItemHasSubmenuIcon {
    filter: brightness(0) invert(1);
}

/* ============================================================
 *  Optional divider element — styled if present, inert if not
 * ============================================================ */
#driveRightClickMenu .driveRightClickMenuDivider {
    display: block !important;
    height: 1px !important;
    width: auto !important;
    background: rgba(0, 0, 0, 0.08) !important;
    margin: 4px 2px !important;
    padding: 0 !important;
    border: none !important;
}

/* ============================================================
 *  Accessibility
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {

    #driveRightClickMenu,
    #driveRightClickMenu .driveRightClickSubMenu {
        animation: none;
    }

    #driveRightClickMenu .driveRightClickMenuItem,
    #driveRightClickMenu .driveRightClickSubMenuItem {
        transition: none;
    }
}

#driveRightClickMenu .driveRightClickMenuItem:focus-visible,
#driveRightClickMenu .driveRightClickSubMenuItem:focus-visible {
    outline: 2px solid #83C6A3 !important;
    outline-offset: -2px !important;
}

/* ============================================================
 *  Fallback — browsers without backdrop-filter support
 * ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    #driveRightClickMenu,
    #driveRightClickMenu .driveRightClickSubMenu {
        background: #ffffff !important;
    }
}