/* ═══════════════════════════════════════════════════════════════════════
   NGEL admin polish v6 — one ⋯ button per row; actions open as a menu.

   The old always-visible button clusters stretched every table. Now the
   actions column holds a single compact ⋯ chip; clicking it opens the row's
   real buttons as a dropdown panel (the buttons are never moved or cloned,
   so React's handlers keep working — their existing wrapper just becomes
   the panel).

   Scope: body.ngel-admin is stamped by the ngel-row-actions script only when
   the staff sidebar exists — storefront tables are never touched.
   ═══════════════════════════════════════════════════════════════════════ */

/* the actions cell shrinks to a chip, and stays reachable

   Sticky rather than relative. A list wider than its card scrolls sideways,
   and the actions column is last — so on a 1152px laptop the whole cell sat
   past the right edge of the card: the ⋯ chip could not be seen, and the menu
   it opens was drawn out there with it, clipped by the same overflow that made
   it scroll. Pinned to the right edge, the chip is always on screen and the
   panel it anchors opens inside the card.

   It costs nothing on a table that already fits: sticky only takes effect when
   there is somewhere to scroll. Sticky still establishes the containing block
   the absolutely-positioned menu needs, so the panel below is unaffected. */
body.ngel-admin table tbody td:last-of-type:has(button, a) {
    position: sticky;
    right: 0;
    z-index: 4;
    background: #fff;
    /* a soft edge, so the row reads as passing underneath */
    box-shadow: -10px 0 12px -10px rgba(15, 23, 42, .22);
    cursor: pointer;
    min-width: 52px;
    text-align: right;
}

/* the heading above it travels the same way, or the column looks unhinged */
body.ngel-admin table thead th:last-of-type {
    position: sticky;
    right: 0;
    z-index: 5;
    background: #fff;
    box-shadow: -10px 0 12px -10px rgba(15, 23, 42, .22);
}

html[data-theme="dark"] body.ngel-admin table tbody td:last-of-type:has(button, a),
html[data-theme="dark"] body.ngel-admin table thead th:last-of-type {
    background: #141b2d;
    box-shadow: -10px 0 12px -10px rgba(0, 0, 0, .5);
}

/* the row's button cluster is out of the layout until asked for */
body.ngel-admin table tbody td:last-of-type > div {
    display: none !important;
}

/* the ⋯ chip */
body.ngel-admin table tbody td:last-of-type:has(button, a)::after {
    content: '⋯';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border: 1px solid #d8dfea;
    border-radius: 9px;
    background: #fff;
    color: #64748b;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    transition: .12s;
}
body.ngel-admin table tbody td:last-of-type:has(button, a):hover::after {
    border-color: #94a3b8;
    color: #0f172a;
    background: #f8fafc;
}
/* :last-of-type.ngel-open, not .ngel-open alone. The rule above it carries
   :last-of-type AND :has(button, a), which outweighed a lone class — so the
   open cell kept z-index 4 like every other one, and the cells of the rows
   below it, being later in the document, painted straight over the menu. That
   is the "hidden under something" this was reported as. */
body.ngel-admin table tbody td:last-of-type.ngel-open {
    z-index: 999;
}
body.ngel-admin table tbody td.ngel-open::after {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #fff !important;
}

/* open: the existing wrapper becomes the dropdown panel

   Fixed, and placed by ngel-row-actions rather than by this file. The cell it
   lives in sits inside a card with overflow-x:auto — and a box that scrolls on
   one axis clips the other too, so an absolutely-placed menu was cut off at the
   top and bottom as well as the sides. Worse, the cell is sticky and carries a
   z-index, which makes it a stacking context: the menu could not rise above the
   rows below it and disappeared underneath them.

   Fixed positioning leaves the card's clipping behind, and the script measures
   the chip and flips the menu up or left when the edge of the window is close.
   The coordinates are set inline; nothing here decides where it goes. */
body.ngel-admin table tbody td.ngel-open > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    position: fixed;
    z-index: 4000;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    padding: 7px;
}
body.ngel-admin table tbody td.ngel-open > div > button,
body.ngel-admin table tbody td.ngel-open > div > a {
    width: 100%;
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12.8px !important;
    white-space: nowrap;
}

/* wide tables scroll inside their card instead of clipping */
body.ngel-admin div:has(> table) { overflow-x: auto; }