/* ============================================================================
   KIBO v2 — entity context menu (KBW-0066)
   Rendered by KiboContextMenu.razor, positioned from C#. Same surface tokens as
   the dialog and the toast stack, so it reads as the same system.
   ============================================================================ */

/* Below the modal layer (1050): a destructive entry's confirm must cover the menu,
   and the menu is already closed by then anyway. Outside-click dismissal is a
   document listener (js/contextmenu.js), not a backdrop element — see the comment
   there for why. */
.kctx-menu {
    position: fixed; z-index: 1041;
    min-width: 244px; max-width: 320px;
    padding: 5px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-size: .875rem;
    -webkit-user-select: none;
    user-select: none;
}
.kctx-menu:focus { outline: none; }

.kctx-item {
    position: relative;
    display: flex; align-items: center; gap: .55rem;
    height: 30px; padding: 0 .5rem;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}
/* .active is the KEYBOARD cursor (aria-activedescendant points at it). It looks like
   hover on purpose: the two are the same idea reached with different hardware, and the
   menu never shows both at once. */
.kctx-item:hover,
.kctx-item.active,
.kctx-item.open        { background: var(--bg-surface-2); }
.kctx-item.danger.active { background: color-mix(in srgb, var(--alert) 14%, transparent); }
.kctx-item.danger      { color: var(--alert-text); }
.kctx-item.danger:hover{ background: color-mix(in srgb, var(--alert) 14%, transparent); }
.kctx-item.disabled,
.kctx-item.loading     { color: var(--ink-soft); cursor: default; }
.kctx-item.disabled:hover,
.kctx-item.loading:hover { background: transparent; }

.kctx-icon    { width: 15px; height: 15px; flex: 0 0 15px; opacity: .75; }
.kctx-label   { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.kctx-chevron { flex: 0 0 auto; opacity: .55; margin-right: -2px; }

/* Status colour chip, so the submenu reads like the board it mirrors. */
.kctx-swatch {
    width: 10px; height: 10px; flex: 0 0 15px;
    margin-left: 2px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.kctx-sep {
    height: 1px; margin: 4px 6px;
    background: var(--line);
}

/* Submenus open to the right of the parent row, flipping left when the viewport
   would cut them off. They scroll internally rather than growing without limit —
   length is fine, needing to SEARCH is what disqualifies a list from the menu. */
.kctx-submenu {
    position: absolute; top: -5px; left: 100%;
    min-width: 200px; max-width: 260px;
    max-height: 320px; overflow-y: auto;
    padding: 5px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.kctx-submenu.flip { left: auto; right: 100%; }

/* Coarse pointers get bigger hit targets — that is where the kebab is the only way in. */
@media (pointer: coarse) {
    .kctx-item { height: 38px; }
    .kctx-menu { min-width: 260px; }
}

/* ── Kebab affordance on rows and cards ─────────────────────────────────────
   Right-click is invisible, and a draggable row cannot also carry a long-press
   (12_UX_Audit), so the kebab is BOTH the discoverability hint on a mouse and
   the only way in on touch. It opens the same component with the same array. */
.tasks-kebab, .kcard-kebab {
    flex: 0 0 auto;
    border: none; background: none; color: var(--ink-soft);
    cursor: pointer; padding: .2rem; border-radius: 6px; line-height: 0;
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.tasks-kebab:hover, .kcard-kebab:hover { color: var(--ink); background: var(--bg-surface-2); }

/* Revealed on hover, and always while its menu is open — otherwise the button
   vanishes under the pointer the moment the menu takes focus. One rule per row
   kind: the left panel's project rows and the Gantt's name pane carry the same
   button, since the Gantt's bars are Frappe's SVG and cannot host one. */
.tasks-row:hover .tasks-kebab,
.tasks-panel-row:hover .tasks-kebab,
.gff-side-row:hover .tasks-kebab,
.kcard:hover .kcard-kebab,
.tasks-kebab:focus-visible,
.kcard-kebab:focus-visible { opacity: 1; }

/* In the calendar the button lives on the tap popover, not on every chip: a bar is
   a few pixels tall, and the popover IS the touch path. Nothing to reveal there. */
.kcal-pop-kebab { opacity: 1; margin-right: auto; }

/* The card's kebab floats top-right, out of the title's flow. */
.kcard { position: relative; }
.kcard-kebab { position: absolute; top: .35rem; right: .35rem; }
.kcard-title { padding-right: 1.1rem; }

/* Coarse pointers have no hover and no long-press here: always visible. */
@media (pointer: coarse) {
    .tasks-kebab, .kcard-kebab { opacity: 1; }
}