/* =============================================================================
 * Row actions menu — UI/UX Notes v0.2 (Phil Cuff, 2026-09-30)
 *
 * The document grids and the Dashboard keep View and the flow pill (Certify / Continue
 * certifying) visible and move every other row action into an overflow menu, so a row reads as
 * one primary action plus "more". The flow pill is the one filled action; View is an outline and
 * the menu button is a ghost. Markup: Views/Shared/_DocumentRowActions.cshtml and the Dashboard
 * rows. Behaviour: wwwroot/js/secuura/row-menu.js.
 *
 * The open list is position: fixed, placed by row-menu.js from the toggle's rectangle. The grid
 * table clips its children (overflow: hidden, for its rounded corners), and so does each row
 * once it collapses into a card below 768px, so an absolutely positioned menu would be cut off
 * on the last rows. Fixed positioning escapes that clipping while the items stay inside the
 * row in the DOM, which keeps row-scoped locators working. When it fits on neither side of the
 * button, row-menu.js sets a max-height and the list scrolls inside itself.
 *
 * Tokens only (tokens.css), with two deliberate exceptions noted where they occur.
 * ============================================================================= */

.secuura-row-actions {
    --row-menu-focus: hsl(var(--foreground));   /* light: navy ring; the teal ring is ~2:1 on white */
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
.dark .secuura-row-actions {
    --row-menu-focus: hsl(var(--ring));         /* dark: the bright teal ring clears 9:1 */
}

.secuura-row-menu {
    display: inline-block;
}

/* The menu button is a ghost: it opens more, it is not itself an action. */
.secuura-row-menu-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: hsl(var(--muted-foreground));
}
.secuura-row-menu-toggle:hover,
.secuura-row-menu-toggle[aria-expanded="true"] {
    background-color: hsl(var(--muted));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}
/* PS-1021 (Stuart, 2026-10-08): the toggle reads as a dropdown — "Actions ▾" with a visible outline —
   rather than a ghost ⋯, because users did not recognise ⋯ as the way to the row's actions. */
.secuura-row-menu-toggle--labelled {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
    font-weight: 500;
    white-space: nowrap;
}
.secuura-row-menu-caret {
    font-size: 0.7em;
    transition: transform 0.15s ease;
}
.secuura-row-menu-toggle[aria-expanded="true"] .secuura-row-menu-caret {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .secuura-row-menu-caret { transition: none; }
}
.secuura-row-menu-toggle:focus {
    box-shadow: none;
}
.secuura-row-menu-toggle:focus-visible {
    outline: 2px solid var(--row-menu-focus);
    outline-offset: 2px;
}

.secuura-row-menu-list {
    position: fixed;
    /* Above the shell (sidebar 1031); below the drawer scrim (1040), Bootstrap modals (1050) and the
       phone sidebar (1059/1060), so anything opened from an item sits on top of it. */
    z-index: 1035;
    min-width: 200px;
    max-width: calc(100vw - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    box-shadow: 0 12px 24px hsl(var(--foreground) / 0.14);
    text-align: left;
}
/* DESIGN.md §4 Popover, the identity popover's recipe (shell.css): an inset top highlight and a
   deep ambient drop. The rgba values are that spec's, verbatim. */
.dark .secuura-row-menu-list {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 24px rgba(0, 0, 0, 0.5);
}

.secuura-row-menu-list[hidden] {
    display: none;
}

.secuura-row-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: calc(var(--radius) - 4px);
    background: none;
    color: hsl(var(--popover-foreground));
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.secuura-row-menu-item i {
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
    color: hsl(var(--muted-foreground));
}

/* Hover is a tint; keyboard focus is the tint plus a ring, so the two never look the same. */
.secuura-row-menu-item:hover,
.secuura-row-menu-item:focus {
    background-color: hsl(var(--muted));
    color: hsl(var(--popover-foreground));
    text-decoration: none;
    outline: none;
}
.secuura-row-menu-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--row-menu-focus);
}

.secuura-row-menu-item--danger,
.secuura-row-menu-item--danger i,
.secuura-row-menu-item--danger:hover,
.secuura-row-menu-item--danger:focus {
    color: hsl(var(--destructive-on-light));
}
/* Dark theme: the destructive red is 5.1:1 on the popover but only 4.2:1 on the --muted hover
   tint. One step lighter on the same hue (0 82%) holds 5.5:1 there. A literal because no token
   names "destructive text on a dark tint". */
.dark .secuura-row-menu-item--danger:hover,
.dark .secuura-row-menu-item--danger:focus,
.dark .secuura-row-menu-item--danger:hover i,
.dark .secuura-row-menu-item--danger:focus i {
    color: hsl(0 82% 74%);
}

.secuura-row-menu-separator {
    height: 1px;
    margin: 4px 2px;
    background-color: hsl(var(--border));
}

/* Phones: 44px targets for the button and the items, and labels that wrap at large text sizes. */
@media (max-width: 767.98px) {
    .secuura-row-menu-toggle.secuura-iconbtn {
        width: 44px;
        height: 44px;
    }
    .secuura-row-menu-toggle--labelled {
        min-height: 44px;
    }
    .secuura-row-menu-item {
        min-height: 44px;
        white-space: normal;
    }
    .secuura-row-actions {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .secuura-row-menu-list:not([hidden]) {
        animation: secuura-row-menu-in 120ms ease-out;
    }
}

@keyframes secuura-row-menu-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}