/**
 * Manic Pixels Web OS — Context Menu CSS
 * Glassmorphism | Usa var(--mp-menu-*)
 * Sprint 3
 */

/* ── Container ───────────────────────────────────────────────────────────── */

.mp-contextmenu {
  position: fixed;
  z-index: 9800;
  min-width: 180px;
  max-width: 280px;
  padding: 4px 0;

  background: var(--mp-menu-bg);
  border: 1px solid var(--mp-menu-border);
  border-radius: var(--mp-menu-radius);
  box-shadow: var(--mp-menu-shadow);

  font-family: var(--mp-font-ui);
  font-size: var(--mp-font-size-base);
  color: var(--mp-menu-fg);

  user-select: none;
  -webkit-user-select: none;
}

.mp-contextmenu.blur-on {
  backdrop-filter:         blur(var(--mp-menu-blur)) saturate(var(--mp-aero-saturation, 160%));
  -webkit-backdrop-filter: blur(var(--mp-menu-blur)) saturate(var(--mp-aero-saturation, 160%));
  background: rgba(var(--mp-accent-rgb), calc(var(--mp-glass-tint-opacity, 0.35) * 0.85)) !important;
  border-color: rgba(var(--mp-accent-rgb), 0.65) !important;
  box-shadow: var(--mp-menu-shadow),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Animação de fade */
.mp-contextmenu {
  animation: mp-menu-in 0.1s ease;
  transform-origin: top left;
}

@keyframes mp-menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.mp-contextmenu.no-anim {
  animation: none;
}

/* ── Item de menu ─────────────────────────────────────────────────────────── */

.mp-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.08s ease;
  position: relative;
  white-space: nowrap;
  min-height: 28px;
}

.mp-menu-item:hover,
.mp-menu-item.active {
  background: var(--mp-menu-active-bg);
  color: var(--mp-menu-active-fg);
}

.mp-menu-item.disabled {
  opacity: 0.38;
  pointer-events: none;
  cursor: default;
}

/* ── Ícone do item ───────────────────────────────────────────────────────── */

.mp-menu-icon {
  width: var(--mp-menu-icon-size);
  height: var(--mp-menu-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  opacity: 0.75;
}

.mp-menu-item:hover .mp-menu-icon,
.mp-menu-item.active .mp-menu-icon {
  opacity: 1;
}

.mp-menu-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.mp-menu-icon img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* Espaço reservado quando item sem ícone mas outros têm */
.mp-menu-icon-placeholder {
  width: var(--mp-menu-icon-size);
  height: var(--mp-menu-icon-size);
  flex-shrink: 0;
}

/* ── Label ───────────────────────────────────────────────────────────────── */

.mp-menu-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Atalho de teclado (hint) ────────────────────────────────────────────── */

.mp-menu-shortcut {
  font-size: 10px;
  opacity: 0.45;
  margin-left: auto;
  padding-left: 16px;
  flex-shrink: 0;
}

.mp-menu-item:hover .mp-menu-shortcut,
.mp-menu-item.active .mp-menu-shortcut {
  opacity: 0.7;
}

/* ── Seta de submenu ─────────────────────────────────────────────────────── */

.mp-menu-arrow {
  margin-left: auto;
  padding-left: 8px;
  opacity: 0.5;
  flex-shrink: 0;
  font-size: 10px;
}

.mp-menu-item:hover .mp-menu-arrow,
.mp-menu-item.active .mp-menu-arrow {
  opacity: 0.9;
}

/* ── Separador ───────────────────────────────────────────────────────────── */

.mp-menu-sep {
  height: 1px;
  background: var(--mp-menu-separator);
  margin: 4px 8px;
  pointer-events: none;
}

/* ── Submenu ─────────────────────────────────────────────────────────────── */

.mp-submenu-wrapper {
  position: relative;
}

.mp-submenu {
  position: fixed;
  z-index: 9850;
  display: none;
}

.mp-submenu-wrapper:hover > .mp-submenu,
.mp-submenu-wrapper.open > .mp-submenu {
  display: block;
}

/* ── Check mark ──────────────────────────────────────────────────────────── */

.mp-menu-check {
  width: var(--mp-menu-icon-size);
  height: var(--mp-menu-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--mp-accent);
}

.mp-menu-item:not(.checked) .mp-menu-check {
  visibility: hidden;
}

/* ── Header de grupo ─────────────────────────────────────────────────────── */

.mp-menu-group-header {
  padding: 6px 10px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  pointer-events: none;
}