/* Scoped styles for ContextMenu. Colours come from the shared ZB.MOM.WW.Theme
   tokens (theme.css) so the menu tracks the app palette in light and dark. */

.ctx-surface {
    display: inline;
}

/* Positioned wrap so a keyboard-opened menu can anchor below the "⋯" button. */
.ctx-ellipsis-wrap {
    position: relative;
    display: inline-block;
}

/* The "⋯" fallback trigger — a compact, quiet icon button. */
.ctx-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--ink-soft);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

    .ctx-ellipsis:hover,
    .ctx-ellipsis[aria-expanded="true"] {
        background: var(--hover-bg);
        border-color: var(--bs-border-color);
        color: var(--ink);
    }

/* Transparent full-viewport catch-all; sits just under the menu. */
.ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: transparent;
}

.ctx-menu {
    position: fixed;
    z-index: 1081; /* above the backdrop, below toasts (1090) */
    min-width: 11rem;
    max-width: 20rem;
    padding: 0.25rem;
    background: var(--card);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    outline: none;
}

/* Keyboard-opened placement: anchored just below the "⋯" trigger instead of the pointer. */
.ctx-menu--anchored {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
}

.ctx-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--ink);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

    .ctx-item:hover:not(:disabled),
    .ctx-item.active:not(:disabled) {
        background: var(--hover-bg);
    }

    .ctx-item:disabled {
        color: var(--ink-faint);
        cursor: not-allowed;
    }

.ctx-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.1rem;
    justify-content: center;
}

.ctx-label {
    flex: 1 1 auto;
}

.ctx-separator {
    height: 1px;
    margin: 0.25rem 0.3rem;
    background: var(--bs-border-color);
}