body.theme-material .task-context-menu {
  position: fixed;
  z-index: 7000;
  display: none;
  width: 252px;
  padding: 6px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-3);
  color: var(--color-text-primary);
  transition: none;
}

body.theme-material .task-context-menu.is-open { display: block; }
/* The menu itself receives programmatic focus for Escape-key handling.
   Keep that focus invisible; individual items retain their focus-visible state. */
body.theme-material .task-context-menu:focus { outline: none; }
body.theme-material .task-context-menu :is(.task-context-tags-picker, .task-context-move-picker) {
  position: absolute;
  top: var(--task-context-tags-top, 0px);
  left: calc(100% - 1px);
  display: none;
  width: 252px;
  padding: 6px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-3);
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 24px);
  overflow: hidden;
}
body.theme-material .task-context-menu.is-tags-picker .task-context-tags-picker { display: flex; }
body.theme-material .task-context-menu .task-context-move-picker { top: var(--task-context-move-top, 0px); }
body.theme-material .task-context-menu.is-move-picker .task-context-move-picker { display: flex; }
body.theme-material .task-context-menu :is(.task-context-tags-picker, .task-context-move-picker).opens-left {
  right: calc(100% - 1px);
  left: auto;
}
.task-context-tags-title {
  padding: 5px 6px 3px;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
}
.task-context-tags-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 212px;
  overflow-y: auto;
  min-height: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.task-context-move-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 248px;
  overflow-y: auto;
  min-height: 0;
}
.task-context-move-option {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.task-context-move-option:hover:not(:disabled),
.task-context-move-option:focus-visible:not(:disabled) {
  outline: none;
  background: var(--color-bg-hover);
}
.task-context-move-option.is-current {
  color: var(--color-text-secondary);
  cursor: default;
}
.task-context-move-option-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.task-context-move-option-main > :last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-context-move-option-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  color: var(--color-brand-primary);
}
.task-context-move-option-icon svg,
.task-context-move-option-icon .category-item-icon {
  width: 16px !important;
  height: 16px !important;
  display: block;
}
.task-context-move-current {
  color: var(--color-text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}
.task-context-tags-option {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border-radius: 6px;
  color: var(--color-text-primary);
  cursor: pointer;
}
.task-context-tags-option:hover { background: var(--color-bg-hover); }
.task-context-tags-option input { accent-color: var(--color-brand-primary); }
.task-context-tags-option-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary);
  flex: 0 0 14px;
}
.task-context-tags-option-icon svg { width: 14px; height: 14px; }
.task-context-tags-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-default);
}
.task-context-tags-actions button {
  height: 32px;
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.task-context-tags-cancel {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}
.task-context-tags-save {
  border: 0;
  background: var(--color-brand-primary);
  color: var(--color-brand-primary-foreground);
}

body.theme-material .task-context-menu-item,
body.theme-material .task-context-menu-priority {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

body.theme-material .task-context-menu-item:hover,
body.theme-material .task-context-menu-item:focus-visible,
body.theme-material .task-context-menu-priority:hover,
body.theme-material .task-context-menu-priority:focus-visible {
  outline: none;
  background: var(--color-bg-hover);
}

.task-context-menu-icon,
.task-context-menu-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary);
  flex: 0 0 18px;
}

.task-context-menu-icon svg,
.task-context-menu-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-context-menu-icon .task-context-menu-priority-icon {
  fill: currentColor;
  stroke: none;
}

.task-context-menu-label { flex: 1 1 auto; min-width: 0; }
.task-context-menu-chevron { margin-left: auto; color: var(--color-text-secondary); }
.task-context-menu-chevron svg { width: 15px; height: 15px; }

.task-context-menu-divider {
  height: 1px;
  margin: 5px 4px;
  background: var(--color-border-default);
}

.task-context-menu-item.is-danger,
.task-context-menu-item.is-danger .task-context-menu-icon { color: var(--color-danger); }

.task-context-menu-submenu {
  position: absolute;
  left: calc(100% - 1px);
  top: 0;
  display: none;
  width: 190px;
  padding: 6px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-3);
}

/* A forgiving hover bridge keeps the submenu open while the pointer crosses
   from its parent row, even when the movement is not perfectly horizontal. */
.task-context-menu-submenu::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -10px;
  bottom: -10px;
  left: -14px;
  width: 14px;
}

.task-context-menu-item[data-context-action="priority"]:hover + .task-context-menu-submenu,
.task-context-menu-item[data-context-action="priority"]:focus-visible + .task-context-menu-submenu,
.task-context-menu.is-priority-submenu .task-context-menu-priority-submenu,
.task-context-menu-submenu:hover { display: block; }

.task-context-menu.is-completed-task [data-context-action="complete"] { display: none; }

.task-context-menu-priority { gap: 11px; }
/* Reuse the task-card flag and its priority colour tokens, rather than
   introducing a second priority icon for the context menu. */
body.theme-material .task-context-menu .task-card-priority-icon {
  width: 18px;
  height: 18px;
}
body.theme-material .task-context-menu .task-context-priority-normal { color: var(--color-filter-priority-normal-text); }
body.theme-material .task-context-menu .task-context-priority-medium { color: var(--color-filter-priority-medium-text); }
body.theme-material .task-context-menu .task-context-priority-critical { color: var(--color-filter-priority-critical-text); }
body.theme-material .task-context-menu .task-context-priority-high { color: var(--color-filter-priority-high-text); }

.task-context-menu-item[data-context-action="due"]:hover + .task-context-menu-submenu,
.task-context-menu-item[data-context-action="due"]:focus-visible + .task-context-menu-submenu,
.task-context-menu.is-due-submenu .task-context-menu-due-submenu,
.task-context-menu-due-submenu:hover { display: block; }
.task-context-menu-due-submenu { top: 44px; }

.task-context-menu-mobile-back { display: none !important; }

@media (max-width: 900px) {
  body.theme-material .task-context-menu {
    width: min(266px, calc(100vw - 24px));
    box-sizing: border-box;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Mobile pickers replace the main actions instead of opening off-screen. */
  .task-context-menu:is(.is-priority-submenu, .is-due-submenu, .is-postpone-submenu) .task-context-menu-main > :not(.task-context-menu-submenu),
  .task-context-menu:is(.is-tags-picker, .is-move-picker) .task-context-menu-main {
    display: none !important;
  }

  body.theme-material .task-context-menu .task-context-menu-submenu,
  body.theme-material .task-context-menu :is(.task-context-tags-picker, .task-context-move-picker) {
    position: static;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 0;
    box-shadow: none;
    max-height: none;
  }

  .task-context-menu-submenu::before { display: none; }
  /* Touch browsers retain :hover after a tap; use the explicit panel state. */
  body.theme-material .task-context-menu .task-context-menu-submenu { display: none !important; }
  body.theme-material .task-context-menu.is-priority-submenu .task-context-menu-priority-submenu,
  body.theme-material .task-context-menu.is-due-submenu .task-context-menu-due-submenu,
  body.theme-material .task-context-menu.is-postpone-submenu .task-context-menu-postpone-submenu { display: block !important; }

  body.theme-material .task-context-menu:is(.is-priority-submenu, .is-due-submenu, .is-postpone-submenu, .is-tags-picker, .is-move-picker) .task-context-menu-mobile-back {
    display: flex !important;
    margin-bottom: 4px;
  }
}