/* ============================================
   CONTEXT MENU - Card Zone Selection
   Premium styled popup menu
   ============================================ */

/* High-specificity container to override any global button styles.

   Deliberately without a `backdrop-filter`: `--popup-bg` is opaque in every
   theme, so it was buying nothing visually, while making this element the
   containing block for anything `fixed` inside it — which pinned every submenu
   to the menu's own box and, once the menu had to scroll, clipped them to it as
   well. A card menu is ~460px tall and a phone held sideways is under 400,
   so both halves of that mattered.

   `max-height` is written inline by `goldfish::menus::place_context_menu` from
   the measured box; the scroll here is what makes that cap reachable rather
   than a place where the rest of the menu is simply cut off. */
.card-zone-context-menu {
    position: fixed !important;
    max-width: min(250px, calc(100vw - 16px));
    z-index: 2147483647 !important;
    background: var(--popup-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--popup-shadow);
    padding: 6px;
    min-width: 220px;
    transform-origin: top left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* `100dvh`, not `100vh`: on a phone `100vh` is the height the page would have
   with the browser chrome retracted, so a backdrop sized to it starts below the
   visible bottom of the screen and the strip above the address bar stops
   closing the menu. `inset` covers browsers without dynamic units. */
.context-menu-backdrop {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 2147483646 !important;
    background: transparent;
    /* A tap here is a dismissal, never a scroll or a zoom of what is behind. */
    touch-action: none;
}

/* Context Menu Header with Card Name */
.context-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px 8px 14px;
    border-bottom: 1px solid var(--popup-section-border);
    margin-bottom: 4px;
    gap: 12px;
}

.context-menu-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    flex: 1;
    text-align: left;
}

.context-menu-card-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--button-bg);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

/* Base Item Styles */
.context-menu-item,
button.context-menu-item {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: left;
    font-family: inherit;
    outline: none;
    box-shadow: none;
    white-space: nowrap;
}

/* Hover effects */
.context-menu-item:hover,
button.context-menu-item:hover {
    background: var(--accent-bg-hover);
    border-color: var(--border-hover);
    color: var(--text-color);
}

.menu-label {
    flex: 1;
    font-weight: 500;
}

.menu-icon-right {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-muted);
    pointer-events: none;
}

.context-menu-item:hover .menu-icon-right {
    color: var(--text-color);
    transform: translateX(2px);
}

/* Submenu Container

   Placed by `goldfish::menus::place_submenu` rather than by this stylesheet.
   CSS can only offer "the side of the parent" — `left: 100%` or `right: 100%` —
   and on a phone neither side has room for a 200px panel beside a 220px menu,
   so whichever was chosen hung off the edge of the screen. Rust measures both
   boxes and writes `left`/`top`/`max-height` inline, with a third option this
   file cannot express: laid over the parent menu when that is the only place it
   fits.

   Laid out even while closed — hidden with `visibility`, not `display` — so it
   can be measured before it is shown.

   `fixed`, and its coordinates are the viewport's: the menu it lives in scrolls
   when it is taller than the screen, and an absolutely positioned panel would
   be clipped away by that scroll. Nothing between here and the viewport
   establishes a containing block any more, which is what makes `fixed` mean
   what it says. */
.submenu {
    position: fixed;
    min-width: 200px;
    max-width: calc(100vw - 16px);
    background: var(--popup-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--popup-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* A submenu taller than the screen scrolls rather than running off it. The
       inline `max-height` narrows this to what actually fits. */
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 2147483648;
    /* Higher than parent */
}

.has-submenu>.submenu.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* There used to be an invisible apron here, bridging the gap between a row and
   its panel so the pointer crossing it did not fire `mouseleave` and shut the
   panel. It cannot survive the menu becoming scrollable — a 10px overhang on
   every row is horizontal overflow in the new scroll box — and it is not needed
   any more: `SUBMENU_GAP` is zero, so the panel abuts the row and there is no
   strip belonging to neither of them to cross. */

/* A wrapper around [row, panel] rather than a row that contains its own panel.
   The row has to be a real `<button>` — see `ContextSubmenu` — and a button may
   not contain the buttons the panel is made of.

   Hover is tracked here rather than on the row, so moving the pointer from the
   row into the panel — still a descendant of this element — never reads as
   leaving. The panel is `position: fixed`, so in flow this wrapper is exactly
   as tall as the row and the menu lays out unchanged. */
.has-submenu {
    display: block;
    width: 100%;
    min-width: 0;
}

/* The row that opened a panel stays lit while it is open, so it is obvious
   which of them the panel belongs to — there is no hover to say so on a phone. */
.has-submenu.open>.submenu-trigger {
    background: var(--accent-bg-hover);
    border-color: var(--border-hover);
}

/* Danger Item */
button.context-menu-item-danger:hover {
    background: var(--danger-bg) !important;
    border-left: 2px solid var(--danger-color) !important;
    color: var(--danger-color) !important;
}

.context-menu-divider {
    height: 1px;
    background: var(--popup-section-border);
    margin: 4px 0;
}