/*
  Wortic macOS UI Kit — Dropdown Menu / Context Menu / Application Menu
  wm-menu — reusa a superfície de components/popover/.
  Liquid Glass: vidro denso, seleção accent em gradiente vertical,
  separadores hairline.
*/

@layer components {
  .wm-menu {
    --_glass-bg: var(--wm-material-popover-bg);
    --_glass-blur: var(--wm-material-blur-heavy, 44px);
    --_glass-saturate: var(--wm-material-saturate-heavy, 2);
    --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06),
      0 2px 6px rgba(0, 0, 0, 0.05),
      0 20px 50px -10px rgba(0, 0, 0, 0.28);

    position: fixed;
    z-index: var(--wm-z-dropdown);
    min-width: var(--wm-menu-min-width);
    background: var(--_glass-bg);
    backdrop-filter: blur(var(--_glass-blur)) saturate(var(--_glass-saturate));
    -webkit-backdrop-filter: blur(var(--_glass-blur))
      saturate(var(--_glass-saturate));
    border: none;
    border-radius: var(--wm-radius-lg);
    box-shadow: var(--_inner-light), var(--_float-shadow);
    padding: var(--wm-space-3);
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    transform-origin: var(--wm-popover-origin, top left);
    pointer-events: none;
    transition: opacity var(--wm-duration-fast) var(--wm-ease-emphasized),
      transform var(--wm-duration-normal) var(--wm-ease-spring);
  }
  .wm-menu[data-open="true"] {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
  /* Par obrigatório do [hidden]: o popover.js escreve display:block
     inline ao medir o painel, e sem esta regra um menu escondido por
     atributo voltaria a ocupar a tela. */
  .wm-menu[hidden] {
    display: none !important;
  }

  .wm-menu__item {
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
    width: 100%;
    height: var(--wm-control-height-md);
    padding-inline: var(--wm-space-4);
    border-radius: var(--wm-radius-sm);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-regular);
    color: var(--wm-label-primary);
    background: transparent;
    border: none;
    text-align: start;
    cursor: pointer;
    transition: background var(--wm-duration-instant) var(--wm-ease-standard),
      color var(--wm-duration-instant) var(--wm-ease-standard);
  }
  .wm-menu__item:hover,
  .wm-menu__item.is-active {
    background: linear-gradient(
      180deg,
      var(--wm-accent-hover) 0%,
      var(--wm-accent) 100%
    );
    color: var(--wm-label-on-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  .wm-menu__item:active:not(:disabled) {
    background: var(--wm-accent-pressed);
  }
  .wm-menu__item:focus-visible {
    outline: none;
    background: linear-gradient(
      180deg,
      var(--wm-accent-hover) 0%,
      var(--wm-accent) 100%
    );
    color: var(--wm-label-on-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  .wm-menu__item:disabled {
    color: var(--wm-label-quaternary);
    cursor: not-allowed;
  }
  .wm-menu__item:disabled:hover {
    background: transparent;
    box-shadow: none;
  }

  .wm-menu__item[hidden] {
    display: none;
  }

  .wm-menu__item-icon {
    flex: none;
    width: var(--wm-menu-item-icon-size);
    height: var(--wm-menu-item-icon-size);
    opacity: 0.85;
  }
  .wm-menu__item:hover .wm-menu__item-icon,
  .wm-menu__item.is-active .wm-menu__item-icon {
    opacity: 1;
  }

  .wm-menu__item-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wm-menu__item-shortcut {
    flex: none;
    font-size: var(--wm-font-size-caption);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-tertiary);
    font-family: var(--wm-font-family);
  }
  .wm-menu__item:hover .wm-menu__item-shortcut,
  .wm-menu__item.is-active .wm-menu__item-shortcut,
  .wm-menu__item:focus-visible .wm-menu__item-shortcut {
    color: rgba(255, 255, 255, 0.78);
  }

  .wm-menu__item--destructive {
    color: var(--wm-error);
  }
  .wm-menu__item--destructive:hover,
  .wm-menu__item--destructive:focus-visible {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wm-error) 92%, #ffffff) 0%,
      var(--wm-error) 100%
    );
    color: #ffffff;
  }

  .wm-menu__separator {
    height: var(--wm-border-width-hairline);
    background: color-mix(in srgb, var(--wm-separator) 80%, transparent);
    margin: var(--wm-space-3) var(--wm-space-4);
  }

  .wm-menu__label {
    padding: var(--wm-space-2) var(--wm-space-4);
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--wm-letter-spacing-wide);
    color: var(--wm-label-tertiary);
  }

  .wm-menu__item .wm-icon--check {
    flex: none;
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--wm-duration-fast) var(--wm-ease-emphasized),
      transform var(--wm-duration-fast) var(--wm-ease-spring);
  }
  .wm-menu__item[aria-checked="true"] .wm-icon--check {
    opacity: 1;
    transform: scale(1);
  }

  .wm-menu__submenu-caret {
    flex: none;
    margin-inline-start: auto;
    color: var(--wm-label-quaternary);
  }
  .wm-menu__item:hover .wm-menu__submenu-caret,
  .wm-menu__item.is-active .wm-menu__submenu-caret,
  .wm-menu__item:focus-visible .wm-menu__submenu-caret {
    color: rgba(255, 255, 255, 0.78);
  }

  /* Submenu (um nível, como no macOS): o item pai mora num __subwrap
     posicionado e o painel filho é absoluto, colado ao flanco do pai.
     Quem abre é :hover OU :focus-within do wrap — as setas do teclado
     entram nele naturalmente, porque focar um subitem mantém o
     :focus-within. O submenu carrega data-open="true" no markup para o
     motor de teclado do dropdown-menu.js reconhecê-lo como navegável;
     quem esconde e mostra são as regras abaixo, não o data-open. */
  .wm-menu__subwrap {
    position: relative;
  }
  .wm-menu .wm-menu--submenu {
    position: absolute;
    top: calc(-1 * var(--wm-space-3));
    inset-inline-start: calc(100% + var(--wm-space-1));
    opacity: 0;
    pointer-events: none;
    /* mesmo idioma de entrada do painel-mãe (scale + deslize curto) */
    transform: scale(0.96) translateY(-4px);
  }
  .wm-menu__subwrap:hover > .wm-menu--submenu,
  .wm-menu__subwrap:focus-within > .wm-menu--submenu {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
  }
  /* O pai fica pintado enquanto o submenu está aberto, mesmo com o
     ponteiro (ou o foco) já dentro do filho — senão a trilha se perde. */
  .wm-menu__subwrap:hover > .wm-menu__item,
  .wm-menu__subwrap:focus-within > .wm-menu__item {
    background: linear-gradient(
      180deg,
      var(--wm-accent-hover) 0%,
      var(--wm-accent) 100%
    );
    color: var(--wm-label-on-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  .wm-menu__subwrap:hover > .wm-menu__item .wm-menu__submenu-caret,
  .wm-menu__subwrap:focus-within > .wm-menu__item .wm-menu__submenu-caret {
    color: rgba(255, 255, 255, 0.78);
  }

  /* Dark: vidro mais escuro, luz interna discreta, sombra profunda. */
  :root[data-theme="dark"] .wm-menu {
    --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.35),
      0 24px 60px -10px rgba(0, 0, 0, 0.65);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wm-menu {
      --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.35),
        0 24px 60px -10px rgba(0, 0, 0, 0.65);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-menu,
    .wm-menu__item,
    .wm-menu__item .wm-icon--check {
      transition: none;
    }
  }
}