/* ==========================================================================
   Eesier Menu de Ações (design system component)
   Razor: Views/Shared/_ActionMenu.cshtml · Model: ActionMenuViewModel
   JS: js/action-menu.js (abre/fecha, clique-fora, Esc, setas)
   Documentação: /Design/MenuAcoes.

   O estouro de ações de um item: um gatilho quadrado silencioso (48px, ícone
   dots) que abre uma folha flutuante com itens de 48px — ícone a 12px do
   rótulo, o MESMO ritmo de todo par ícone-rótulo do sistema. Ação destrutiva
   fala na única tinta de perigo. A folha viaja 12px ao entrar (--ease-travel).
   A folha alinha pela borda final do gatilho; .eesier-action-menu-start a
   alinha pela inicial (o gatilho que abre uma barra — o seletor de área). O
   item atual (.is-active, aria-current="page") fala na tinta ativa em repouso.

   Cores fluem dos tokens com fallback literal — este arquivo também é
   consumido standalone, sem site.css carregado.
   ========================================================================== */

.eesier-action-menu {
    --eam-surface: var(--color-surface, #ffffff);
    --eam-border: var(--color-border, #e2e8f0);
    --eam-shadow: color-mix(in srgb, var(--color-text-dark, #0f172a) 8%, transparent);
    --eam-text: var(--color-text-dark, #0f172a);
    --eam-muted: var(--color-muted, #475569);
    --eam-active: var(--color-palette-primary, #1c91e4);
    --eam-active-surface: var(--color-palette-primary-surface, #eef7ff);
    --eam-veil: color-mix(in srgb, var(--color-text-dark, #0f172a) 5%, transparent);
    --eam-danger: var(--color-danger, #ef4444);

    /* A FOLHA ANCORA NO PRÓPRIO MENU — site.css POSICIONA TODO ELEMENTO, MAS
       UM CONSUMIDOR STANDALONE NÃO O CARREGA */

    position: relative;
    display: inline-flex;
}


.dark .eesier-action-menu,
.eesier-action-menu.dark {
    --eam-surface: var(--color-surface-dark, #101f38);
    --eam-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --eam-shadow: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 48%, transparent);
    --eam-text: var(--color-text-on-dark, #ffffff);
    --eam-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --eam-active: var(--color-palette-secondary, #4fbefe);
    --eam-active-surface: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 16%, transparent);
    --eam-veil: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 5%, transparent);
    --eam-danger: color-mix(in srgb, var(--color-danger, #ef4444) 75%, var(--color-text-on-dark, #ffffff));
}


/* GATILHO — QUADRADO SILENCIOSO DE 48px; O ÍCONE RESPONDE SÓ COM COR. O
   padding ZERADO É DECLARADO PARA QUE NENHUMA REGRA DE BOTÃO DO HOST DEFORME
   O QUADRADO. */

.eesier-action-menu > .eesier-action-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height, 48px);
    height: var(--control-height, 48px);
    padding: 0;
    border: none;
    border-radius: var(--radius-standard, 12px);
    background: transparent;
    color: var(--eam-muted);
    cursor: pointer;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), background-color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


@media (hover: hover) {

    .eesier-action-menu > .eesier-action-menu-trigger:hover {
        color: var(--eam-active);
        background: var(--eam-veil);
    }
}


.eesier-action-menu > .eesier-action-menu-trigger[aria-expanded="true"] {
    color: var(--eam-active);
    background: var(--eam-active-surface);
}


.eesier-action-menu > .eesier-action-menu-trigger:focus-visible {
    outline: 2px solid var(--eam-active);
    outline-offset: 2px;
}


.eesier-action-menu > .eesier-action-menu-trigger > .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
}


/* A FOLHA FLUTUANTE — MESMA SUPERFÍCIE/BORDA/RAIO/SOMBRA DO CARTÃO, COM
   RESPIRO INTERNO DE 6px PARA OS ITENS NÃO TOCAREM A BORDA */

.eesier-action-menu > .eesier-action-menu-sheet {
    position: absolute;
    top: calc(100% + var(--space-tight, 6px));
    right: 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    min-width: 240px;
    max-height: var(--eam-max-height, none);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-tight, 6px);
    border: 1px solid var(--eam-border);
    border-radius: var(--radius-standard, 12px);
    background: var(--eam-surface);
    box-shadow: 0 var(--space-small, 12px) var(--space-medium, 24px) var(--eam-shadow);
}


/* ALINHAMENTO INICIAL — A FOLHA SE ABRE A PARTIR DA BORDA INICIAL DO GATILHO */

.eesier-action-menu.eesier-action-menu-start > .eesier-action-menu-sheet {
    left: 0;
    right: auto;
}


.eesier-action-menu.is-open > .eesier-action-menu-sheet {
    display: flex;
    animation: eesier-action-menu-enter var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

/* The shared script chooses the side with enough viewport space. */
.eesier-action-menu.is-above > .eesier-action-menu-sheet {
    top: auto;
    bottom: calc(100% + var(--space-tight, 6px));
}


@keyframes eesier-action-menu-enter {
    from {
        opacity: 0;
        transform: translateY(calc(var(--space-small, 12px) * -1));
    }


    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ITEM — 48px, ÍCONE A 12px DO RÓTULO, TEXTO PURO EM REPOUSO */

.eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-small, 12px);
    height: var(--control-height, 48px);
    flex-shrink: 0;
    padding: 0 var(--space-small, 12px);
    border: none;
    border-radius: var(--radius-standard, 12px);
    background: transparent;
    color: var(--eam-text);
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    text-transform: lowercase;
    white-space: nowrap;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), background-color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


@media (hover: hover) {

    .eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item:hover {
        color: var(--eam-active);
        background: var(--eam-active-surface);
    }
}


.eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item:focus-visible {
    outline: 2px solid var(--eam-active);
    outline-offset: -2px;
}


.eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item > .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
    color: var(--eam-muted);
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


@media (hover: hover) {

    .eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item:hover > .eicon {
        color: inherit;
    }
}


/* ITEM ATUAL — A PÁGINA OU ÁREA ONDE O USUÁRIO ESTÁ: A TINTA ATIVA EM REPOUSO,
   O MESMO GESTO DO ITEM ATIVO DO MENU LATERAL */

.eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item.is-active {
    color: var(--eam-active);
    background: var(--eam-active-surface);
    font-weight: 700;
}


.eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item.is-active > .eicon {
    color: inherit;
}


/* DESTRUTIVO — A ÚNICA TINTA DE PERIGO DO SISTEMA, NO TEXTO E NO ÍCONE.
   NO ESCURO --eam-danger CLAREIA 75% RUMO AO TEXTO-SOBRE-ESCURO — O GESTO
   ESPELHADO DA FÓRMULA DO CLARO (VER badges.css). */

.eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item.is-danger {
    color: var(--eam-danger);
}


.eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item.is-danger > .eicon {
    color: var(--eam-danger);
}


@media (hover: hover) {

    .eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item.is-danger:hover {
        color: var(--eam-danger);
        background: var(--color-danger-surface, #fef2f2);
    }


    .dark .eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-item.is-danger:hover {
        background: color-mix(in srgb, var(--color-danger, #ef4444) 16%, transparent);
    }
}


/* RÉGUA ENTRE GRUPOS DE ITENS — O VÉU DO SISTEMA */

.eesier-action-menu > .eesier-action-menu-sheet > .eesier-action-menu-separator {
    height: 1px;
    background: var(--eam-veil);
}


@media (prefers-reduced-motion: reduce) {

    .eesier-action-menu.is-open > .eesier-action-menu-sheet {
        animation: none;
    }
}